templates/Parent/DetailsSejour.html.twig line 1

Open in your IDE?
  1. {% extends "Parent/LayoutParent.html.twig" %} {% block LinksCss %}
  2. {{ parent() }}
  4. <script src="https://cdn.jsdelivr.net/npm/aos@2.3.4/dist/aos.js" defer></script>
  5. <link rel="stylesheet" href="{{ '/css/Parent/css/premiercnx.css' }}" />
  6. <link href="{{ asset('css/Parent/css/detailsejour.css') }}" type="text/css" rel="stylesheet" />
  7. <link rel="stylesheet" href="{{ '/css/Accompagnateur/imgzoom.css' }}" />
  8. <link rel="stylesheet" href="{{ asset('Plugins/css/dropzone.css') }}" />
  9. <link rel="stylesheet" href="{{ asset('css/splide.min.css') }}" />
  10. <link rel="stylesheet" href="{{ asset('css/favorites-sidebar.css') }}" />
  11. <link rel="stylesheet" href="{{ asset('css/sidebar-ecommerce-pro.css') }}">
  12. {% set destination = "detailsejour" %}
  14. {# ==================== Configuration B2C Conversion ==================== #}
  15. {% set nowTs = 'now'|date('U') %}
  16. {% set debutTs = sejour.dateDebutSejour|date('U') %}
  17. {% set finTs = sejour.dateFinSejour|date('U') %}
  18. {% set closeTs = sejour.dateFinCode ? sejour.dateFinCode|date('U') : finTs %}
  19. {% set secondsPerDay = 86400 %}
  20. {% set daysSinceStart = ((nowTs - debutTs) / secondsPerDay)|round(0, 'floor') %}
  21. {% set daysUntilEnd = ((finTs - nowTs) / secondsPerDay)|round(0, 'ceil') %}
  22. {% set daysAfterEnd = ((nowTs - finTs) / secondsPerDay)|round(0, 'floor') %}
  23. {% set daysUntilClose = ((closeTs - nowTs) / secondsPerDay)|round(0, 'ceil') %}
  24. <style>
  25. /* ============================================
  26.    PREMIUM DAY CARDS - Style Accompagnateur
  27.    ============================================ */
  29. /* Base card styles */
  30. /* ============================================
  31.    PREMIUM DAY CARDS - Timeline ultra-premium
  32.    Identique à l'espace accompagnateur
  33.    ============================================ */
  35. .date-card {
  36.   flex: 0 0 auto;
  37.   width: 110px;
  38.   background: #fff;
  39.   border-radius: 14px;
  40.   padding: 8px 6px;
  41.   text-align: center;
  42.   transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  43.   overflow: visible;
  44.   scroll-snap-align: center;
  45.   position: relative;
  46.   min-height: 56px;
  47.   max-height: 68px;
  48.   border: 1px solid transparent;
  49.   cursor: pointer;
  50. }
  52. .date-card .day {
  53.   font-weight: 600;
  54.   font-size: 0.70rem;
  55.   color: #2c3e50;
  56.   margin-bottom: 1px;
  57.   letter-spacing: -0.01em;
  58.   line-height: 1.15;
  59. }
  61. .date-card .full-date {
  62.   font-size: 0.60rem;
  63.   color: #6b7280;
  64.   font-weight: 500;
  65.   line-height: 1.1;
  66.   margin-top: 0px;
  67.   padding-bottom: 5px;
  68. }
  70. .date-card ul {
  71.   margin: 4px 0 0 0;
  72.   padding: 0;
  73.   list-style: none;
  74.   display: flex;
  75.   gap: 4px;
  76.   justify-content: center;
  77.   flex-wrap: wrap;
  78.   align-items: center;
  79. }
  81. .date-card ul li {
  82.   font-size: 0.60rem;
  83.   color: #6b7280;
  84.   display: flex;
  85.   align-items: center;
  86.   gap: 2px;
  87.   line-height: 1;
  88.   font-weight: 500;
  89. }
  91. .date-card ul li i {
  92.   font-size: 0.65rem;
  93. }
  95. .premium-day-card {
  96.   flex: 0 0 auto;
  97.   width: 130px;
  98.   background: #fff;
  99.   border-radius: 14px;
  100.   padding: 8px 6px;
  101.   text-align: center;
  102.   transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  103.   overflow: visible;
  104.   scroll-snap-align: center;
  105.   position: relative;
  106.   min-height: 56px;
  107.   max-height: 68px;
  108.   border: 1px solid transparent;
  109.   cursor: pointer;
  110.   will-change: transform;
  111.   contain: layout style;
  112. }
  114. .premium-day-card .day {
  115.   font-weight: 600;
  116.   font-size: 0.9rem;
  117.   color: #2c3e50;
  118.   margin-bottom: 1px;
  119.   letter-spacing: -0.01em;
  120.   line-height: 1.15;
  121. }
  123. .premium-day-card .full-date {
  124.   font-size: 0.75rem;
  125.   color: #6b7280;
  126.   font-weight: 500;
  127.   line-height: 1.1;
  128.   margin-top: 0;
  129. }
  131. /* Compteurs de médias - Points colorés minimalistes */
  132. .premium-day-card ul,
  133. .date-card ul,
  134. .media-list-horizontal {
  135.   margin: 4px 0 0 0;
  136.   padding: 0;
  137.   list-style: none;
  138.   display: flex;
  139.   gap: 4px;
  140.   justify-content: center;
  141.   flex-wrap: wrap;
  142.   align-items: center;
  143. }
  145. .premium-day-card ul li,
  146. .date-card ul li {
  147.   font-size: 0.60rem;
  148.   color: #6b7280;
  149.   display: flex;
  150.   align-items: center;
  151.   gap: 2px;
  152.   line-height: 1;
  153.   font-weight: 500;
  154. }
  156. .premium-day-card ul li i,
  157. .date-card ul li i {
  158.   font-size: 0.65rem;
  159. }
  161. /* ============================================
  162.    COULEURS PAR TYPE DE MÉDIA - Uniforme pour toutes les cartes
  163.    Photo = Orange, Vocal = Bleu, Vidéo = Orange clair
  164.    ============================================ */
  166. /* Photo = Orange 🟠 */
  167. .premium-day-card ul li i.bi-camera,
  168. .premium-day-card ul li i.bi-camera-fill,
  169. .premium-day-card ul li i.bi-image,
  170. .premium-day-card ul li i.bi-images,
  171. .premium-day-past ul li i.bi-camera,
  172. .premium-day-past ul li i.bi-camera-fill,
  173. .premium-day-past ul li i.bi-image,
  174. .premium-day-past ul li i.bi-images,
  175. .premium-day-current ul li i.bi-camera,
  176. .premium-day-current ul li i.bi-camera-fill,
  177. .premium-day-current ul li i.bi-image,
  178. .premium-day-current ul li i.bi-images,
  179. .premium-day-future ul li i.bi-camera,
  180. .premium-day-future ul li i.bi-camera-fill,
  181. .premium-day-future ul li i.bi-image,
  182. .premium-day-future ul li i.bi-images,
  183. .date-card ul li i.bi-camera,
  184. .date-card ul li i.bi-camera-fill,
  185. .date-card ul li i.bi-image,
  186. .date-card ul li i.bi-images {
  187.   color: #F56040 !important;
  188.   opacity: 1 !important;
  189. }
  191. /* Vocal/Audio = Bleu Mint 🔵 */
  192. .premium-day-card ul li i.bi-mic-fill,
  193. .premium-day-card ul li i.bi-mic,
  194. .premium-day-past ul li i.bi-mic-fill,
  195. .premium-day-past ul li i.bi-mic,
  196. .premium-day-current ul li i.bi-mic-fill,
  197. .premium-day-current ul li i.bi-mic,
  198. .premium-day-future ul li i.bi-mic-fill,
  199. .premium-day-future ul li i.bi-mic,
  200. .date-card ul li i.bi-mic-fill,
  201. .date-card ul li i.bi-mic {
  202.   color: #41A2AA !important;
  203.   opacity: 1 !important;
  204. }
  206. /* Vidéo = Orange clair 🟠 */
  207. .premium-day-card ul li i.bi-camera-video,
  208. .premium-day-card ul li i.bi-camera-video-fill,
  209. .premium-day-card ul li i.bi-film,
  210. .premium-day-past ul li i.bi-camera-video,
  211. .premium-day-past ul li i.bi-camera-video-fill,
  212. .premium-day-past ul li i.bi-film,
  213. .premium-day-current ul li i.bi-camera-video,
  214. .premium-day-current ul li i.bi-camera-video-fill,
  215. .premium-day-current ul li i.bi-film,
  216. .premium-day-future ul li i.bi-camera-video,
  217. .premium-day-future ul li i.bi-camera-video-fill,
  218. .premium-day-future ul li i.bi-film,
  219. .date-card ul li i.bi-camera-video,
  220. .date-card ul li i.bi-camera-video-fill,
  221. .date-card ul li i.bi-film {
  222.   color: #FF9F7A !important;
  223.   opacity: 1 !important;
  224. }
  226. /* État PASSÉ - Cohérent avec charte 5sur5 */
  227. .premium-day-past {
  228.   opacity: 0.85;
  229.   background: rgba(65, 162, 170, 0.05);
  230.   border: 1px solid rgba(65, 162, 170, 0.25);
  231.   cursor: pointer;
  232.   pointer-events: auto;
  233. }
  235. .premium-day-past:hover {
  236.   transform: translateY(-2px);
  237.   box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
  238.   opacity: 1;
  239. }
  241. /* État AUJOURD'HUI - Premium mis en avant clairement */
  242. .premium-day-current {
  243.   width: 110px !important;
  244.   border: 2px solid #41A2AA !important;
  245.   background: #fff !important;
  246.   box-shadow: 0 6px 16px rgba(65, 162, 170, 0.12) !important;
  247.   transform: scale(1.04);
  248.   z-index: 10;
  249.   cursor: pointer;
  250.   opacity: 1 !important;
  251.   position: relative;
  252. }
  254. /* Point animé "Aujourd'hui" - style calendrier moderne */
  255. .premium-day-current::after {
  256.   content: '';
  257.   position: absolute;
  258.   top: 8px;
  259.   right: 8px;
  260.   width: 8px;
  261.   height: 8px;
  262.   background: #41A2AA;
  263.   border-radius: 50%;
  264.   box-shadow: 0 0 0 0 rgba(65, 162, 170, 0.7);
  265.   animation: todayPulse 2s ease-in-out infinite;
  266.   z-index: 5;
  267. }
  269. @keyframes todayPulse {
  270.   0% {
  271.     box-shadow: 0 0 0 0 rgba(65, 162, 170, 0.7);
  272.   }
  273.   50% {
  274.     box-shadow: 0 0 0 6px rgba(65, 162, 170, 0);
  275.   }
  276.   100% {
  277.     box-shadow: 0 0 0 0 rgba(65, 162, 170, 0);
  278.   }
  279. }
  281. .premium-day-current:hover {
  282.   transform: scale(1.04);
  283.   box-shadow: 0 6px 16px rgba(65, 162, 170, 0.12) !important;
  284. }
  286. .premium-day-current:focus-visible {
  287.   outline: 3px solid rgba(65, 162, 170, 0.3);
  288.   outline-offset: 2px;
  289. }
  291. .premium-day-current .day,
  292. .premium-day-current .full-date {
  293.   color: #137F86 !important;
  294.   font-weight: 600 !important;
  295. }
  297. .premium-day-current .full-date {
  298.   padding-bottom: 5px !important;
  299. }
  301. .premium-day-current ul li {
  302.   color: #137F86 !important;
  303. }
  305. /* État ACTIF - Carte sélectionnée */
  306. .date-card.active,
  307. .premium-day-card.active {
  308.   width: 140px !important;
  309.   border: 2px solid #41A2AA !important;
  310.   background: #EAF7F7 !important;
  311.   box-shadow: 0 2px 8px rgba(65, 162, 170, 0.15) !important;
  312.   transform: scale(1.02);
  313.   z-index: 10;
  314. }
  316. .date-card.active .day,
  317. .premium-day-card.active .day,
  318. .date-card.active .day-number,
  319. .premium-day-card.active .day-number {
  320.   color: #137F86 !important;
  321.   font-weight: 700;
  322. }
  324. .date-card.active .full-date,
  325. .premium-day-card.active .full-date,
  326. .date-card.active .day-name,
  327. .premium-day-card.active .day-name {
  328.   color: #137F86 !important;
  329.   font-weight: 700;
  330. }
  332. .date-card.active ul li,
  333. .premium-day-card.active ul li {
  334.   color: #137F86 !important;
  335. }
  337. .date-card.active ul li i,
  338. .premium-day-card.active ul li i {
  339.   color: #41A2AA !important;
  340. }
  342. .date-card:hover,
  343. .premium-day-card:hover {
  344.   background-color: #f9f9f9;
  345.   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
  346. }
  348. /* État FUTUR - Semi-caché, réduit, verrouillé */
  349. .premium-day-future {
  350.   opacity: 0.45 !important;
  351.   transform: scale(0.92);
  352.   cursor: not-allowed !important;
  353.   pointer-events: none !important;
  354.   border: 1px solid rgba(188, 196, 206, 0.2) !important;
  355.   background: #fff !important;
  356.   box-shadow: none !important;
  357. }
  359. .premium-day-future:hover {
  360.   transform: scale(0.92) !important;
  361.   box-shadow: none !important;
  362. }
  364. .premium-day-future .day,
  365. .premium-day-future .full-date {
  366.   color: #BCC4CE !important;
  367. }
  369. .premium-day-future ul {
  370.   display: none !important;
  371. }
  373. /* Icône cadenas sur jours futurs */
  374. .premium-day-future::before {
  375.   content: '\F4C0';
  376.   font-family: 'bootstrap-icons';
  377.   position: absolute;
  378.   top: 4px;
  379.   right: 4px;
  380.   font-size: 9px;
  381.   color: #BCC4CE;
  382.   opacity: 0.25;
  383. }
  385. /* Tooltip pour jours futurs */
  386. .premium-day-future::after {
  387.   content: attr(data-tooltip);
  388.   position: absolute;
  389.   bottom: -35px;
  390.   left: 50%;
  391.   transform: translateX(-50%);
  392.   background: rgba(0, 0, 0, 0.85);
  393.   color: white;
  394.   padding: 6px 10px;
  395.   border-radius: 6px;
  396.   font-size: 11px;
  397.   white-space: nowrap;
  398.   opacity: 0;
  399.   pointer-events: none;
  400.   transition: opacity 0.2s ease;
  401.   z-index: 1000;
  402. }
  404. /* Date container scroll */
  405. .date-container {
  406.   display: flex;
  407.   gap: 12px;
  408.   overflow-x: auto;
  409.   scrollbar-width: none;
  410.   -ms-overflow-style: none;
  411.   padding: 8px 4px;
  412. }
  414. .date-container::-webkit-scrollbar {
  415.   display: none;
  416. }
  418. /* Section days wrapper */
  419. .section-days {
  420.   background: #f8fafb;
  421.   border-radius: 12px;
  422.   padding: 10px 12px;
  423.   margin-bottom: 16px;
  424.   border: 1px solid rgba(65, 162, 170, 0.1);
  425.   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  426. }
  428. /* Bouton favoris désactivé (0 favoris) */
  429. .mtb-btn.favoris-empty,
  430. .mtb-btn[data-filter="favoris"]:disabled {
  431.   opacity: 0.6;
  432.   cursor: not-allowed;
  433.   pointer-events: none;
  434.   background: rgba(0, 0, 0, 0.02) !important;
  435.   border-color: rgba(0, 0, 0, 0.08) !important;
  436. }
  438. .mtb-btn.favoris-empty:hover,
  439. .mtb-btn[data-filter="favoris"]:disabled:hover {
  440.   transform: none;
  441.   box-shadow: none;
  442. }
  444. .favoris-empty-text {
  445.   font-size: 11px;
  446.   font-family: inherit;
  447.   color: #94a3b8;
  448.   font-style: italic;
  449.   font-weight: 500;
  450.   line-height: 1.2;
  451. }
  453. /* Styles premium pour les filtres */
  454. .premium-5sur5-actions-group {
  455.   display: flex;
  456.   gap: 8px;
  457.   align-items: center;
  458.   flex-wrap: wrap;
  459. }
  461. .premium-5sur5-action-btn {
  462.   display: inline-flex;
  463.   align-items: center;
  464.   gap: 6px;
  465.   padding: 7px 12px;
  466.   background: #F7FBFC;
  467.   border: 1px solid rgba(65, 162, 170, 0.12);
  468.   border-radius: 14px;
  469.   color: #41A2AA;
  470.   font-size: 13px;
  471.   font-weight: 600;
  472.   font-family: inherit;
  473.   cursor: pointer;
  474.   transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  475.   white-space: nowrap;
  476.   position: relative;
  477.   line-height: 1.4;
  478. }
  480. .premium-5sur5-action-btn:hover:not(:disabled) {
  481.   background: rgba(65, 162, 170, 0.08);
  482.   border-color: rgba(65, 162, 170, 0.25);
  483.   transform: translateY(-1px);
  484. }
  486. .premium-5sur5-action-btn:active:not(:disabled) {
  487.   transform: translateY(0);
  488. }
  490. .premium-5sur5-action-btn i {
  491.   font-size: 14px;
  492.   opacity: 0.85;
  493.   line-height: 1;
  494. }
  496. .premium-5sur5-action-btn span:not(.premium-5sur5-badge):not(.favoris-empty-text) {
  497.   font-size: 13px;
  498.   font-weight: 600;
  499.   letter-spacing: 0.2px;
  500.   line-height: 1.4;
  501.   font-family: inherit;
  502. }
  504. .premium-5sur5-badge {
  505.   display: inline-block;
  506.   font-size: 11px;
  507.   font-weight: 600;
  508.   font-family: inherit;
  509.   padding: 2px 6px;
  510.   border-radius: 6px;
  511.   letter-spacing: 0.2px;
  512.   margin-left: 2px;
  513.   line-height: 1.2;
  514. }
  516. /* État actif pour les boutons premium */
  517. .premium-5sur5-action-btn.mtb-btn.active,
  518. .premium-5sur5-action-btn.mtb-btn.is-active {
  519.   background: rgba(65, 162, 170, 0.15) !important;
  520.   border-color: #41A2AA !important;
  521.   color: #137F86 !important;
  522.   box-shadow: 0 2px 8px rgba(65, 162, 170, 0.2);
  523. }
  525. .premium-5sur5-action-btn.mtb-btn[data-filter="favoris"].active {
  526.   background: rgba(245, 96, 64, 0.15) !important;
  527.   border-color: #f56040 !important;
  528.   color: #d43e1f !important;
  529. }
  531. .premium-5sur5-action-btn.mtb-btn[data-filter="audio"].active {
  532.   background: rgba(255, 215, 0, 0.15) !important;
  533.   border-color: #ffd700 !important;
  534.   color: #b8860b !important;
  535. }
  537. /* Bouton favoris désactivé */
  538. .premium-5sur5-action-btn.favoris-empty,
  539. .premium-5sur5-action-btn[data-filter="favoris"]:disabled {
  540.   opacity: 0.6;
  541.   cursor: not-allowed;
  542.   pointer-events: none;
  543.   background: rgba(0, 0, 0, 0.02) !important;
  544.   border-color: rgba(0, 0, 0, 0.08) !important;
  545. }
  547. .premium-5sur5-action-btn.favoris-empty:hover,
  548. .premium-5sur5-action-btn[data-filter="favoris"]:disabled:hover {
  549.   transform: none;
  550.   box-shadow: none;
  551. }
  553. /* Styles pour la section favoris */
  554. .favorites-ecommerce-view {
  555.   width: 100%;
  556.   max-width: 100%;
  557.   padding: 24px;
  558.   box-sizing: border-box;
  559. }
  561. .favorites-header {
  562.   display: flex;
  563.   justify-content: space-between;
  564.   align-items: center;
  565.   margin-bottom: 24px;
  566.   padding: 20px;
  567.   background: #f8fafb;
  568.   border-radius: 12px;
  569.   border: 1px solid rgba(65, 162, 170, 0.1);
  570. }
  572. .favorites-title {
  573.   display: flex;
  574.   align-items: center;
  575.   gap: 12px;
  576.   flex-wrap: wrap;
  577. }
  579. .favorites-title h3 {
  580.   font-size: 20px;
  581.   font-weight: 700;
  582.   color: #1a1a1a;
  583.   margin: 0;
  584.   display: flex;
  585.   align-items: center;
  586.   gap: 8px;
  587. }
  589. .favorites-title h3 i {
  590.   color: #f56040;
  591.   font-size: 20px;
  592. }
  594. .favorites-count {
  595.   display: inline-flex;
  596.   align-items: center;
  597.   padding: 6px 12px;
  598.   background: rgba(245, 96, 64, 0.1);
  599.   color: #f56040;
  600.   border-radius: 20px;
  601.   font-size: 14px;
  602.   font-weight: 600;
  603. }
  605. .btn-back-to-days {
  606.   display: flex;
  607.   align-items: center;
  608.   gap: 8px;
  609.   padding: 10px 20px;
  610.   background: #ffffff;
  611.   border: 1px solid rgba(65, 162, 170, 0.2);
  612.   border-radius: 10px;
  613.   color: #6b7280;
  614.   font-size: 14px;
  615.   font-weight: 600;
  616.   cursor: pointer;
  617.   transition: all 0.2s ease;
  618. }
  620. .btn-back-to-days:hover {
  621.   background: rgba(65, 162, 170, 0.05);
  622.   border-color: #41A2AA;
  623.   color: #41A2AA;
  624. }
  626. .favorites-content {
  627.   width: 100%;
  628. }
  630. .favorites-grid {
  631.   display: grid;
  632.   grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  633.   gap: 16px;
  634.   width: 100%;
  635.   padding: 0;
  636. }
  638. .favorites-grid .favorite-item,
  639. .favorites-grid .photo-item {
  640.   position: relative;
  641.   width: 100%;
  642.   aspect-ratio: 1;
  643.   border-radius: 12px;
  644.   overflow: hidden;
  645.   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  646.   transition: all 0.3s ease;
  647.   cursor: pointer;
  648. }
  650. .favorites-grid .favorite-item:hover,
  651. .favorites-grid .photo-item:hover {
  652.   transform: translateY(-4px);
  653.   box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
  654. }
  656. .favorites-grid .favorite-item:hover .favorite-actions,
  657. .favorites-grid .photo-item:hover .favorite-actions {
  658.   opacity: 1;
  659. }
  661. .favorites-grid img {
  662.   width: 100%;
  663.   height: 100%;
  664.   object-fit: cover;
  665.   display: block;
  666. }
  668. .favorites-grid .favorite-item {
  669.   position: relative;
  670. }
  672. .favorites-grid .favorite-actions {
  673.   position: absolute;
  674.   top: 8px;
  675.   right: 8px;
  676.   display: flex;
  677.   gap: 6px;
  678.   opacity: 0;
  679.   transition: opacity 0.3s ease;
  680.   z-index: 10;
  681. }
  683. /* CTA discret et premium */
  684. .premium-cta-subtle {
  685.   margin: 20px 0;
  686.   padding: 16px 20px;
  687.   background: rgba(65, 162, 170, 0.04);
  688.   border: 1px solid rgba(65, 162, 170, 0.15);
  689.   border-radius: 12px;
  690.   cursor: pointer;
  691.   transition: all 0.3s ease;
  692.   display: flex;
  693.   align-items: center;
  694.   justify-content: space-between;
  695.   gap: 12px;
  696.   text-decoration: none;
  697.   color: inherit;
  698. }
  700. .premium-cta-subtle:hover {
  701.   background: rgba(65, 162, 170, 0.08);
  702.   border-color: rgba(65, 162, 170, 0.25);
  703.   transform: translateX(2px);
  704.   text-decoration: none;
  705.   color: inherit;
  706. }
  708. .premium-cta-subtle > div:first-child {
  709.   display: flex;
  710.   align-items: center;
  711.   gap: 12px;
  712.   flex: 1;
  713. }
  715. .premium-cta-subtle > div:first-child > div:first-child {
  716.   width: 40px;
  717.   height: 40px;
  718.   background: rgba(65, 162, 170, 0.1);
  719.   border-radius: 10px;
  720.   display: flex;
  721.   align-items: center;
  722.   justify-content: center;
  723.   flex-shrink: 0;
  724. }
  726. .premium-cta-subtle > div:first-child > div:first-child i {
  727.   font-size: 18px;
  728.   color: #41A2AA;
  729. }
  731. .premium-cta-subtle > div:first-child > div:last-child {
  732.   flex: 1;
  733.   min-width: 0;
  734. }
  736. .premium-cta-subtle > div:first-child > div:last-child p:first-child {
  737.   margin: 0;
  738.   font-size: 14px;
  739.   font-weight: 600;
  740.   color: #1a1a1a;
  741.   line-height: 1.4;
  742. }
  744. .premium-cta-subtle > div:first-child > div:last-child p:last-child {
  745.   margin: 4px 0 0 0;
  746.   font-size: 12px;
  747.   color: #6b7280;
  748.   line-height: 1.4;
  749. }
  751. .premium-cta-subtle > i:last-child {
  752.   font-size: 18px;
  753.   color: #41A2AA;
  754.   flex-shrink: 0;
  755. }
  759. .premium-5sur5-day-title {
  760.   font-size: 1.35rem;
  761.   font-weight: 700;
  762.   color: #2c3e50;
  763.   margin: 0 0 4px 0;
  764.   letter-spacing: -0.02em;
  765.   line-height: 1.3;
  766. }
  768. .premium-5sur5-day-subtitle {
  769.   font-size: 0.9rem;
  770.   color: #6b7280;
  771.   margin: 0;
  772.   font-weight: 500;
  773.   line-height: 1.5;
  774. }
  776. @media (max-width: 768px) {
  777.   .premium-5sur5-day-header {
  778.     padding: 12px 16px;
  779.     margin-bottom: 16px;
  780.   }
  782.   .premium-5sur5-day-title {
  783.     font-size: 1.15rem;
  784.   }
  786.   .premium-5sur5-day-subtitle {
  787.     font-size: 0.8rem;
  788.   }
  790.   /* Menu sticky en bas - Override des styles précédents */
  791.   .premium-5sur5-actions-group {
  792.     position: fixed !important;
  793.     bottom: 0 !important;
  794.     left: 0 !important;
  795.     right: 0 !important;
  796.     width: 100% !important;
  797.     background: #ffffff !important;
  798.     border-top: 1px solid rgba(65, 162, 170, 0.15) !important;
  799.     padding: 12px 16px !important;
  800.     z-index: 1050 !important;
  801.     box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.08) !important;
  802.     justify-content: space-around !important;
  803.     gap: 0 !important;
  804.     margin: 0 !important;
  805.     margin-top: 0 !important;
  806.     /* Safe area pour iPhone avec encoche */
  807.     padding-bottom: max(12px, env(safe-area-inset-bottom)) !important;
  808.   }
  810.   .premium-5sur5-action-btn {
  811.     flex: 1 !important;
  812.     justify-content: center !important;
  813.     min-width: 0 !important;
  814.     padding: 10px 8px !important;
  815.     border-radius: 12px !important;
  816.     font-size: 12px !important;
  817.   }
  819.   .premium-5sur5-action-btn i {
  820.     font-size: 16px !important;
  821.   }
  822.   
  823.   .premium-5sur5-action-btn span:not(.premium-5sur5-badge):not(.favoris-empty-text) {
  824.     font-size: 12px !important;
  825.   }
  826.   
  827.   .premium-5sur5-badge {
  828.     font-size: 10px !important;
  829.     padding: 2px 5px !important;
  830.   }
  832.   /* Ajouter un padding-bottom au contenu pour éviter que le menu sticky ne cache le contenu */
  833.   #scrollTarget {
  834.     padding-bottom: 80px !important;
  835.   }
  837.   /* Section favoris responsive */
  838.   .favorites-ecommerce-view {
  839.     padding: 16px !important;
  840.   }
  842.   .favorites-header {
  843.     flex-direction: column !important;
  844.     gap: 12px !important;
  845.     align-items: flex-start !important;
  846.     padding: 16px !important;
  847.     margin-bottom: 16px !important;
  848.   }
  850.   .favorites-title {
  851.     width: 100% !important;
  852.   }
  854.   .favorites-title h3 {
  855.     font-size: 18px !important;
  856.     margin-bottom: 8px !important;
  857.   }
  859.   .favorites-count {
  860.     font-size: 13px !important;
  861.     padding: 4px 10px !important;
  862.   }
  864.   .btn-back-to-days {
  865.     width: 100% !important;
  866.     justify-content: center !important;
  867.     padding: 10px 16px !important;
  868.     font-size: 14px !important;
  869.   }
  871.   .favorites-content {
  872.     padding: 0 !important;
  873.   }
  875.   .favorites-grid {
  876.     display: grid !important;
  877.     grid-template-columns: repeat(2, 1fr) !important;
  878.     gap: 12px !important;
  879.     padding: 0 !important;
  880.   }
  882.   .favorites-grid .favorite-item,
  883.   .favorites-grid .photo-item {
  884.     width: 100% !important;
  885.     height: auto !important;
  886.     min-height: 150px !important;
  887.     aspect-ratio: 1 !important;
  888.     position: relative !important;
  889.     display: block !important;
  890.     border-radius: 12px !important;
  891.     overflow: hidden !important;
  892.     background: #f0f0f0 !important;
  893.   }
  895.   .favorites-grid .favorite-item img,
  896.   .favorites-grid .photo-item img {
  897.     width: 100% !important;
  898.     height: 100% !important;
  899.     min-height: 150px !important;
  900.     object-fit: cover !important;
  901.     display: block !important;
  902.     position: absolute !important;
  903.     top: 0 !important;
  904.     left: 0 !important;
  905.     border-radius: 12px !important;
  906.   }
  908.   .favorites-grid video {
  909.     width: 100% !important;
  910.     height: 100% !important;
  911.     min-height: 150px !important;
  912.     object-fit: cover !important;
  913.     display: block !important;
  914.     position: absolute !important;
  915.     top: 0 !important;
  916.     left: 0 !important;
  917.     border-radius: 12px !important;
  918.   }
  920.   /* CTA discret responsive */
  921.   .premium-cta-subtle {
  922.     padding: 12px 16px !important;
  923.     margin: 16px 0 !important;
  924.   }
  926.   .premium-cta-subtle > div:first-child > div:first-child {
  927.     width: 36px !important;
  928.     height: 36px !important;
  929.   }
  931.   .premium-cta-subtle > div:first-child > div:first-child i {
  932.     font-size: 16px !important;
  933.   }
  935.   .premium-cta-subtle > div:first-child > div:last-child p:first-child {
  936.     font-size: 13px !important;
  937.   }
  939.   .premium-cta-subtle > div:first-child > div:last-child p:last-child {
  940.     font-size: 11px !important;
  941.   }
  943.   .premium-cta-subtle:hover {
  944.     background: rgba(65, 162, 170, 0.08) !important;
  945.     border-color: rgba(65, 162, 170, 0.25) !important;
  946.     transform: translateX(2px) !important;
  947.   }
  948. }
  950. .date-navigation {
  951.   width: 100%;
  952. }
  954. /* Legacy compatibility */
  955. .date-card .card-content {
  956.   display: block;
  957.   text-align: center;
  958. }
  960. .date-card .media-list-horizontal {
  961.   margin: 0 !important;
  962.   padding: 0 !important;
  963.   display: flex;
  964.   gap: 6px;
  965.   justify-content: center;
  966. }
  968. .date-card .media-list-horizontal li {
  969.   font-size: 0.65rem !important;
  970. }
  972. /* Dots minimalistes pour les indicateurs de jour */
  973. .dot {
  974.   display: inline-block;
  975.   width: 6px;
  976.   height: 6px;
  977.   border-radius: 50%;
  978.   margin-left: 4px;
  979. }
  981. .dot.blue {
  982.   background: #41a2aa;
  983. }
  985. .dot.green {
  986.   background: #8ed081;
  987. }
  989. .dot.orange {
  990.   background: #ff9c57;
  991. }
  993. /* Dot multi-couleur pour aujourd'hui + premier/dernier jour */
  994. .status-dot.multi {
  995.   position: absolute;
  996.   top: 6px;
  997.   right: 6px;
  998.   width: 10px;
  999.   height: 10px;
  1000.   border-radius: 50%;
  1001.   background: linear-gradient(90deg, #41a2aa 50%, #ff9c57 50%);
  1002.   z-index: 5;
  1003. }
  1005. /* Variante pour premier jour + aujourd'hui */
  1006. .status-dot.multi.green-orange {
  1007.   background: linear-gradient(90deg, #8ed081 50%, #ff9c57 50%);
  1008. }
  1010. /* ==================== TOASTS & ANIMATIONS ==================== */
  1011. @keyframes slideUpFromGift {
  1012.   0% {
  1013.     opacity: 0;
  1014.     transform: translateY(60px) scale(0.9);
  1015.   }
  1016.   100% {
  1017.     opacity: 1;
  1018.     transform: translateY(0) scale(1);
  1019.   }
  1020. }
  1022. @keyframes fadeOut {
  1023.   to {
  1024.     opacity: 0;
  1025.     transform: translateY(-20px);
  1026.   }
  1027. }
  1029. /* ========== BANDEAU PROMO SÉJOUR TERMINÉ ========== */
  1030. .promo-banner-termine {
  1031.   background: linear-gradient(90deg, #d32f2f 0%, #e65100 50%, #ff5722 100%);
  1032.   color: white;
  1033.   padding: 0;
  1034.   height: 38px;
  1035.   width: 100%;
  1036.   position: relative;
  1037.   z-index: 100;
  1038.   box-shadow: 0 2px 6px rgba(211, 47, 47, 0.2);
  1039. }
  1040. .promo-banner-content {
  1041.   display: flex;
  1042.   align-items: center;
  1043.   justify-content: center;
  1044.   gap: 10px;
  1045.   max-width: 1200px;
  1046.   margin: 0 auto;
  1047.   padding: 0 12px;
  1048.   height: 100%;
  1049. }
  1050. .promo-banner-icon {
  1051.   font-size: 16px;
  1052.   flex-shrink: 0;
  1053. }
  1054. .promo-banner-text {
  1055.   font-size: 12px;
  1056.   line-height: 1.2;
  1057. }
  1058. .promo-banner-text strong {
  1059.   font-weight: 700;
  1060.   display: inline;
  1061. }
  1062. .promo-days {
  1063.   color: #fff;
  1064.   font-weight: 700;
  1065.   background: rgba(255,255,255,0.2);
  1066.   padding: 1px 5px;
  1067.   border-radius: 3px;
  1068.   font-size: 11px;
  1069. }
  1070. .promo-banner-cta {
  1071.   background: #fff;
  1072.   color: #d32f2f;
  1073.   font-weight: 600;
  1074.   font-size: 11px;
  1075.   padding: 4px 12px;
  1076.   border-radius: 12px;
  1077.   text-decoration: none;
  1078.   white-space: nowrap;
  1079.   transition: all 0.2s;
  1080. }
  1081. .promo-banner-cta:hover {
  1082.   background: rgba(255,255,255,0.9);
  1083.   transform: scale(1.02);
  1084.   color: #d32f2f;
  1085. }
  1086. .promo-banner-close {
  1087.   background: none;
  1088.   border: none;
  1089.   color: white;
  1090.   font-size: 18px;
  1091.   cursor: pointer;
  1092.   opacity: 0.7;
  1093.   padding: 0 2px;
  1094.   margin-left: 2px;
  1095.   line-height: 1;
  1096. }
  1097. .promo-banner-close:hover {
  1098.   opacity: 1;
  1099. }
  1100. @media (max-width: 600px) {
  1101.   .promo-banner-termine {
  1102.     height: 34px;
  1103.   }
  1104.   .promo-banner-content {
  1105.     gap: 6px;
  1106.     padding: 0 8px;
  1107.   }
  1108.   .promo-banner-text {
  1109.     font-size: 11px;
  1110.   }
  1111.   .promo-banner-icon {
  1112.     font-size: 14px;
  1113.   }
  1114. }
  1116. /* ========== SLIDER COMPACT PREMIUM ========== */
  1117. #heroPromo {
  1118.   margin: 0;
  1119.   padding: 0;
  1120.   width: 100%;
  1121.   overflow: hidden;
  1122.   background: #fff;
  1123. }
  1125. #heroPromo .divSliderModern {
  1126.   width: 100% !important;
  1127.   margin: 0 !important;
  1128.   padding: 0 !important;
  1129. }
  1131. #imageSlider {
  1132.   max-height: 70px !important;
  1133.   height: 70px !important;
  1134.   overflow: hidden !important;
  1135.   width: 100% !important;
  1136.   margin: 0 !important;
  1137.   padding: 0 !important;
  1138. }
  1140. #imageSlider .splide__track {
  1141.   height: 70px !important;
  1142.   width: 100% !important;
  1143.   margin: 0 !important;
  1144.   padding: 0 !important;
  1145. }
  1147. #imageSlider .splide__list {
  1148.   width: 100% !important;
  1149.   margin: 0 !important;
  1150.   padding: 0 !important;
  1151. }
  1153. #imageSlider .splide__slide {
  1154.   height: 70px !important;
  1155.   width: 100% !important;
  1156.   margin: 0 !important;
  1157.   padding: 0 !important;
  1158. }
  1160. #imageSlider .splide__slide img {
  1161.   object-fit: contain !important;
  1162.   height: auto !important;
  1163.   width: auto !important;
  1164. }
  1166. .slider-content-compact {
  1167.   display: flex;
  1168.   align-items: center;
  1169.   justify-content: flex-start;
  1170.   gap: 0;
  1171.   background: linear-gradient(135deg, #f7fcfc 0%, #ffffff 30%, #fef8f5 100%);
  1172.   height: 70px !important;
  1173.   padding: 0;
  1174.   width: 100%;
  1175.   box-sizing: border-box;
  1176.   overflow: hidden;
  1177.   position: relative;
  1178. }
  1180. .imgslider-compact {
  1181.   height: 100% !important;
  1182.   width: 70% !important;
  1183.   object-fit: cover;
  1184.   flex-shrink: 0;
  1185.   display: block;
  1186. }
  1188. .slider-text-compact {
  1189.   display: flex;
  1190.   flex-direction: column;
  1191.   gap: 4px;
  1192.   align-items: flex-start;
  1193.   justify-content: center;
  1194.   flex: 1;
  1195.   min-width: 0;
  1196.   overflow: hidden;
  1197.   padding: 12px 24px;
  1198.   height: 100%;
  1199. }
  1201. .slider-title-compact {
  1202.   font-size: 14px;
  1203.   font-weight: 700;
  1204.   line-height: 1.3;
  1205.   color: inherit;
  1206.   white-space: normal;
  1207.   word-wrap: break-word;
  1208.   max-width: 100%;
  1209. }
  1211. .slider-subtitle-compact {
  1212.   font-size: 12px;
  1213.   font-weight: 500;
  1214.   line-height: 1.3;
  1215.   color: inherit;
  1216.   white-space: normal;
  1217.   word-wrap: break-word;
  1218.   max-width: 100%;
  1219. }
  1221. @media (max-width: 768px) {
  1222.   #imageSlider, #imageSlider .splide__track, #imageSlider .splide__slide, .slider-content-compact {
  1223.     height: 65px !important;
  1224.   }
  1225.   .slider-content-compact {
  1226.     gap: 0;
  1227.   }
  1228.   .imgslider-compact {
  1229.     height: 100% !important;
  1230.     width: 70% !important;
  1231.   }
  1232.   .slider-text-compact {
  1233.     padding: 10px 16px;
  1234.   }
  1235.   .slider-title-compact {
  1236.     font-size: 13px;
  1237.     line-height: 1.2;
  1238.   }
  1239.   .slider-subtitle-compact {
  1240.     font-size: 11px;
  1241.     line-height: 1.2;
  1242.   }
  1243. }
  1245. @media (max-width: 480px) {
  1246.   #imageSlider, #imageSlider .splide__track, #imageSlider .splide__slide, .slider-content-compact {
  1247.     height: 60px !important;
  1248.   }
  1249.   .slider-content-compact {
  1250.     gap: 0;
  1251.   }
  1252.   .imgslider-compact {
  1253.     height: 100% !important;
  1254.     width: 70% !important;
  1255.   }
  1256.   .slider-text-compact {
  1257.     padding: 8px 12px;
  1258.   }
  1259.   .slider-title-compact {
  1260.     font-size: 12px;
  1261.     line-height: 1.2;
  1262.   }
  1263.   .slider-subtitle-compact {
  1264.     font-size: 10px;
  1265.     line-height: 1.2;
  1266.   }
  1267. }
  1269. /* ========== EMPTY STATE ========== */
  1270. .stay-empty-wrapper {
  1271.   padding: 50px 20px 60px;
  1272.   display: flex;
  1273.   justify-content: center;
  1274. }
  1276. .stay-empty-card {
  1277.   max-width: 720px;
  1278.   width: 100%;
  1279.   background: #ffffff;
  1280.   border-radius: 24px;
  1281.   padding: 44px 40px 40px;
  1282.   box-shadow: 0 16px 50px rgba(5, 45, 60, 0.06);
  1283.   margin: 0 auto;
  1284. }
  1286. .stay-empty-title {
  1287.   font-size: 1.5rem;
  1288.   font-weight: 700;
  1289.   color: #1A1A2E;
  1290.   margin-bottom: 20px;
  1291.   text-align: center;
  1292. }
  1294. .stay-empty-intro {
  1295.   font-size: 0.98rem;
  1296.   line-height: 1.7;
  1297.   color: #5A6178;
  1298.   max-width: 580px;
  1299.   margin: 0 auto 32px;
  1300.   text-align: center;
  1301. }
  1303. /* Section "Ce qui va arriver" */
  1304. .stay-empty-expect {
  1305.   display: flex;
  1306.   gap: 36px;
  1307.   align-items: flex-start;
  1308.   margin-bottom: 28px;
  1309. }
  1311. .stay-empty-expect-content {
  1312.   flex: 1;
  1313. }
  1315. .stay-empty-expect-label {
  1316.   font-size: 0.92rem;
  1317.   font-weight: 600;
  1318.   color: #1A1A2E;
  1319.   margin-bottom: 16px;
  1320. }
  1322. .stay-empty-list {
  1323.   list-style: none;
  1324.   padding: 0;
  1325.   margin: 0;
  1326. }
  1328. .stay-empty-list li {
  1329.   display: flex;
  1330.   align-items: flex-start;
  1331.   gap: 12px;
  1332.   padding: 10px 0;
  1333.   font-size: 0.92rem;
  1334.   color: #4B5563;
  1335.   line-height: 1.5;
  1336. }
  1338. .stay-empty-list-icon {
  1339.   width: 28px;
  1340.   height: 28px;
  1341.   border-radius: 8px;
  1342.   display: flex;
  1343.   align-items: center;
  1344.   justify-content: center;
  1345.   flex-shrink: 0;
  1346.   margin-top: 1px;
  1347. }
  1349. .stay-empty-list-icon svg {
  1350.   width: 14px;
  1351.   height: 14px;
  1352. }
  1354. .stay-empty-list-icon--check {
  1355.   background: rgba(65, 162, 170, 0.12);
  1356.   color: #41A2AA;
  1357. }
  1359. .stay-empty-list-icon--photos {
  1360.   background: rgba(240, 158, 122, 0.12);
  1361.   color: #E8865E;
  1362. }
  1364. .stay-empty-list-icon--vocal {
  1365.   background: rgba(155, 139, 244, 0.12);
  1366.   color: #7B6BE0;
  1367. }
  1369. /* Illustration compacte */
  1370. .stay-empty-illustration {
  1371.   position: relative;
  1372.   width: 180px;
  1373.   height: 200px;
  1374.   flex-shrink: 0;
  1375. }
  1377. .stay-empty-phone {
  1378.   position: absolute;
  1379.   left: 50%;
  1380.   top: 50%;
  1381.   transform: translate(-50%, -50%);
  1382.   width: 90px;
  1383.   filter: drop-shadow(0 8px 20px rgba(0,0,0,0.1));
  1384.   animation: phoneFloat 4s ease-in-out infinite;
  1385. }
  1387. @keyframes phoneFloat {
  1388.   0%, 100% { transform: translate(-50%, -50%) translateY(0); }
  1389.   50% { transform: translate(-50%, -50%) translateY(-5px); }
  1390. }
  1392. .stay-empty-bubble {
  1393.   position: absolute;
  1394.   display: flex;
  1395.   align-items: center;
  1396.   gap: 6px;
  1397.   padding: 6px 10px;
  1398.   background: #ffffff;
  1399.   border-radius: 10px;
  1400.   box-shadow: 0 4px 14px rgba(0,0,0,0.08);
  1401.   font-size: 0.72rem;
  1402.   font-weight: 600;
  1403.   color: #1A1A2E;
  1404.   white-space: nowrap;
  1405.   opacity: 0;
  1406.   animation: bubbleFadeIn 0.5s ease forwards;
  1407. }
  1409. .stay-empty-bubble-icon {
  1410.   width: 18px;
  1411.   height: 18px;
  1412.   border-radius: 5px;
  1413.   display: flex;
  1414.   align-items: center;
  1415.   justify-content: center;
  1416.   flex-shrink: 0;
  1417. }
  1419. .stay-empty-bubble-icon svg {
  1420.   width: 10px;
  1421.   height: 10px;
  1422. }
  1424. .stay-empty-bubble--arrived {
  1425.   top: 20px;
  1426.   left: -10px;
  1427.   animation-delay: 0.4s;
  1428. }
  1430. .stay-empty-bubble--arrived .stay-empty-bubble-icon {
  1431.   background: linear-gradient(135deg, #41A2AA, #359BA3);
  1432.   color: white;
  1433. }
  1435. .stay-empty-bubble--photos {
  1436.   top: 70px;
  1437.   right: -5px;
  1438.   animation-delay: 0.9s;
  1439. }
  1441. .stay-empty-bubble--photos .stay-empty-bubble-icon {
  1442.   background: linear-gradient(135deg, #F09E7A, #E8865E);
  1443.   color: white;
  1444. }
  1446. @keyframes bubbleFadeIn {
  1447.   0% { opacity: 0; transform: translateY(6px) scale(0.95); }
  1448.   100% { opacity: 1; transform: translateY(0) scale(1); }
  1449. }
  1451. .stay-empty-illustration-label {
  1452.   position: absolute;
  1453.   bottom: 0;
  1454.   left: 50%;
  1455.   transform: translateX(-50%);
  1456.   font-size: 0.7rem;
  1457.   color: #8E95A9;
  1458.   white-space: nowrap;
  1459.   text-align: center;
  1460. }
  1462. /* Note rassurante */
  1463. .stay-empty-reassurance {
  1464.   background: #F8FAFB;
  1465.   border-radius: 12px;
  1466.   padding: 14px 20px;
  1467.   margin-bottom: 24px;
  1468.   display: flex;
  1469.   align-items: flex-start;
  1470.   gap: 12px;
  1471. }
  1473. .stay-empty-reassurance-icon {
  1474.   width: 20px;
  1475.   height: 20px;
  1476.   color: #41A2AA;
  1477.   flex-shrink: 0;
  1478.   margin-top: 2px;
  1479. }
  1481. .stay-empty-reassurance p {
  1482.   margin: 0;
  1483.   font-size: 0.85rem;
  1484.   color: #5A6178;
  1485.   line-height: 1.6;
  1486. }
  1488. /* CTA */
  1489. .stay-empty-cta {
  1490.   display: inline-flex;
  1491.   align-items: center;
  1492.   gap: 8px;
  1493.   padding: 11px 22px;
  1494.   font-size: 0.88rem;
  1495.   font-weight: 600;
  1496.   color: #41A2AA;
  1497.   background: transparent;
  1498.   border: 1.5px solid #E5E9F0;
  1499.   border-radius: 10px;
  1500.   text-decoration: none;
  1501.   transition: all 0.2s ease;
  1502. }
  1504. .stay-empty-cta:hover {
  1505.   background: #F0F9FA;
  1506.   border-color: #41A2AA;
  1507.   color: #359BA3;
  1508.   text-decoration: none;
  1509. }
  1511. .stay-empty-cta svg {
  1512.   width: 16px;
  1513.   height: 16px;
  1514. }
  1516. .stay-empty-footer {
  1517.   text-align: center;
  1518. }
  1520. /* Responsive */
  1521. @media (max-width: 700px) {
  1522.   .stay-empty-card {
  1523.     padding: 32px 24px 32px;
  1524.   }
  1526.   .stay-empty-title {
  1527.     font-size: 1.3rem;
  1528.   }
  1530.   .stay-empty-expect {
  1531.     flex-direction: column;
  1532.     gap: 24px;
  1533.   }
  1535.   .stay-empty-illustration {
  1536.     width: 100%;
  1537.     height: 160px;
  1538.     order: -1;
  1539.   }
  1541.   .stay-empty-phone {
  1542.     width: 80px;
  1543.   }
  1545.   .stay-empty-bubble {
  1546.     font-size: 0.68rem;
  1547.     padding: 5px 8px;
  1548.   }
  1550.   .stay-empty-bubble--arrived {
  1551.     left: calc(50% - 85px);
  1552.   }
  1554.   .stay-empty-bubble--photos {
  1555.     right: calc(50% - 85px);
  1556.   }
  1558.   .stay-empty-reassurance {
  1559.     flex-direction: column;
  1560.     gap: 8px;
  1561.     text-align: center;
  1562.   }
  1564.   .stay-empty-reassurance-icon {
  1565.     margin: 0 auto;
  1566.   }
  1567. }
  1569. </style>
  1570. <script>
  1571.   window.__FEATURE_PARENT_CONVERSION__ = true;
  1573.   // Configuration runtime pour le système B2C
  1574.   {# Calcul des dates pour le JS - on calcule tout en Twig #}
  1575.   {% set nowTimestamp = 'now'|date('U') %}
  1576.   {% set debutTimestamp = sejour.dateDebutSejour|date('U') %}
  1577.   {% set finTimestamp = sejour.dateFinSejour|date('U') %}
  1578.   {% set finCodeDateJS = sejour.dateFinCode is defined and sejour.dateFinCode is not null ? sejour.dateFinCode : sejour.dateFinSejour|date_modify('+42 days') %}
  1579.   {% set closeTimestamp = finCodeDateJS|date('U') %}
  1580.   {% set daysSinceStartCalc = ((nowTimestamp - debutTimestamp) / 86400)|round(0, 'floor') %}
  1581.   {% set daysUntilEndCalc = ((finTimestamp - nowTimestamp) / 86400)|round(0, 'ceil') %}
  1582.   {% set daysAfterEndCalc = ((nowTimestamp - finTimestamp) / 86400)|round(0, 'floor') %}
  1583.   {% set daysUntilCloseCalc = ((closeTimestamp - nowTimestamp) / 86400)|round(0, 'ceil') %}
  1584.   
  1585.   window.PARENT_CONVERSION_CONFIG = {
  1586.     user: {
  1587.       prenom: "{{ app.user.prenom|default('Parent')|e('js') }}"
  1588.     },
  1589.     sejour: {
  1590.       id: {{ sejour.id }},
  1591.       dateDebut: "{{ sejour.dateDebutSejour|date('Y-m-d') }}",
  1592.       dateFin: "{{ sejour.dateFinSejour|date('Y-m-d') }}",
  1593.       dateFinCode: "{{ sejour.dateFinCode ? sejour.dateFinCode|date('Y-m-d') : '' }}",
  1594.       isTermine: {{ (sejour.dateFinSejour < date()) ? 'true' : 'false' }}
  1595.     },
  1596.     dates: {
  1597.       aujourdhui: "{{ 'now'|date('Y-m-d') }}",
  1598.       isFirstDay: {{ (sejour.dateDebutSejour|date('Y-m-d') == 'now'|date('Y-m-d')) ? 'true' : 'false' }},
  1599.       isWithin: {{ (sejour.dateDebutSejour <= date() and sejour.dateFinSejour >= date()) ? 'true' : 'false' }},
  1600.       daysSinceStart: {{ daysSinceStartCalc|default(0) }},
  1601.       daysUntilEnd: {{ daysUntilEndCalc|default(0) }},
  1602.       daysAfterEnd: {{ daysAfterEndCalc|default(0) }},
  1603.       daysUntilClose: {{ daysUntilCloseCalc|default(0) }}
  1604.     },
  1605.     stats: {
  1606.       totalDays: {{ sejour.dateFinSejour.diff(sejour.dateDebutSejour).days }},
  1607.       totalPhotos: {{ attachementsCount|default(0) }},
  1608.       totalMessages: {{ nbmessages|default(0) }},
  1609.       todayPhotos: {{ photosDuJour|default(0) }}
  1610.     },
  1611.     parent: {
  1612.       favorites: {{ nblikes|default(0) }},
  1613.       cartCount: 0,
  1614.       lastVisitAt: "{{ 'now'|date('Y-m-d H:i:s') }}"
  1615.     }
  1616.   };
  1618.   // Catalogue produits (routes réelles 5sur5)
  1619.   window.PARENT_PRODUCT_CATALOG = {
  1620.     digi10: { title:"Pack numérique 10 photos", badge:"Petit budget", url:"{{ path('boutique5sur5') }}" },
  1621.     digi25: { title:"Pack numérique 25 photos", badge:"Immédiat", url:"{{ path('boutique5sur5') }}" },
  1622.     retro12: { title:"Pochette rétro 12 tirages", badge:"Cadeau", url:"{{ path('boutique5sur5') }}" },
  1623.     prints20: { title:"Pochette 20 tirages", badge:"Best seller", url:"{{ path('boutique5sur5') }}" },
  1624.     album24: { title:"Mini-album 24 pages", badge:"Parfait début", url:"{{ path('Album_du_Sejour') }}" },
  1625.     album48: { title:"Album Premium 48 pages", badge:"Meilleure vente", url:"{{ path('Album_du_Sejour') }}" },
  1626.     mix10Poster: { title:"Pack mixte 10 tirages + poster", badge:"Combo", url:"{{ path('boutique5sur5') }}" },
  1627.     bundleAlbumPrints: { title:"Album + tirages (-15%)", badge:"Éco", url:"{{ path('boutique5sur5') }}" }
  1628.   };
  1629. </script>
  1630. <style>
  1631. .btn-close {
  1632.   font-size: 1.2rem;
  1633.   border: none;
  1634.   background: transparent;
  1635. }
  1636. .slide img {
  1637.   max-width: 100%;
  1638.   max-height: 100%;
  1639.   object-fit: contain;
  1640.   border-radius: 8px;
  1641.   box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4);
  1642.   transition: transform 0.3s ease;
  1643.   cursor: pointer;
  1644. }
  1646. .slide img.zoomed {
  1647.   transform: scale(1.5);
  1648.   cursor: zoom-in;
  1649. }
  1651. /* === Badges discrets des cartes jours (style accompagnateur avec Bootstrap) === */
  1652. /* Les badges utilisent directement les classes Bootstrap: badge, bg-success, bg-info, position-absolute */
  1654. /* === Affichage des dates (style accompagnateur exact) === */
  1656. .container--gallery.modern {
  1657.   background: #ffffff;
  1658.   border-radius: 32px;
  1659.   padding: 10px;
  1660.   box-shadow: 0 30px 70px rgba(11, 36, 71, 0.08);
  1661.   border: 1px solid rgba(65, 162, 170, 0.08);
  1662.   min-height:1000px;
  1663. }
  1665. @media (max-width: 768px) {
  1666.   .container--gallery.modern {
  1667.     padding: 24px;
  1668.     min-height:500px;
  1669.   }
  1670. }
  1672. .pro-journal {
  1673.   background: linear-gradient(145deg, #f8fbff 0%, #ffffff 100%);
  1674.   border-radius: 24px;
  1675.   padding: 28px;
  1676.   margin-bottom: 28px;
  1677.   border: 1px solid rgba(65, 162, 170, 0.08);
  1678.   box-shadow: 0 18px 45px rgba(11, 36, 71, 0.05);
  1679. }
  1681. .pro-entry-header {
  1682.   display: flex;
  1683.   align-items: center;
  1684.   justify-content: space-between;
  1685.   flex-wrap: wrap;
  1686.   gap: 18px;
  1687.   margin-bottom: 20px;
  1688. }
  1690. .pro-entry-header .date-chip {
  1691.   display: inline-flex;
  1692.   align-items: center;
  1693.   gap: 10px;
  1694.   padding: 10px 18px;
  1695.   border-radius: 999px;
  1696.   background: rgba(65, 162, 170, 0.08);
  1697.   color: #1f2933;
  1698.   font-weight: 600;
  1699.   font-size: 0.95rem;
  1700. }
  1702. .gallery-meta-chips {
  1703.   display: flex;
  1704.   flex-wrap: wrap;
  1705.   gap: 10px;
  1706.   align-items: center;
  1707. }
  1709. .gallery-meta-chips .filter-badge {
  1710.   background: #ffffff;
  1711.   border: 1px solid rgba(15, 40, 77, 0.08);
  1712.   border-radius: 999px;
  1713.   padding: 8px 14px;
  1714.   font-size: 0.85rem;
  1715.   font-weight: 600;
  1716.   color: #405064;
  1717.   display: inline-flex;
  1718.   align-items: center;
  1719.   gap: 6px;
  1720.   transition: all 0.2s ease;
  1721. }
  1723. .gallery-meta-chips .filter-badge.active {
  1724.   background: #41a2aa;
  1725.   color: #fff;
  1726.   border-color: #41a2aa;
  1727.   box-shadow: 0 8px 20px rgba(65, 162, 170, 0.25);
  1728. }
  1730. .gallery-grid {
  1731.   width: 100%;
  1732.   display: grid !important;
  1733.   grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  1734.   gap: 18px;
  1735. }
  1737. .gallery-grid .column {
  1738.   margin: 0 !important;
  1739. }
  1741. .gallery-grid .photo-item,
  1742. .gallery-grid .video-item,
  1743. .gallery-grid .audio-message-item {
  1744.   border-radius: 18px;
  1745.   background: #fff;
  1746.   border: 1px solid rgba(15, 40, 77, 0.08);
  1747.   box-shadow: 0 12px 30px rgba(11, 36, 71, 0.08);
  1748. }
  1750. .gallery-grid .photo-item img {
  1751.   border-radius: 16px;
  1752.   height: 220px;
  1753.   object-fit: cover;
  1754. }
  1756. .gallery-grid .video-item video,
  1757. .gallery-grid .audio-message-item audio {
  1758.   border-radius: 12px;
  1759. }
  1761. </style>
  1762. {% endblock %} {% set pageMenu = app.session.get('pageMenu') %} {% block Content
  1763. %}
  1767. <div class="main-content">
  1768.   <div class="row no-margin">
  1769.     <!-- Bouton cadeau attractif e-commerce -->
  1770.     {% set showGiftButton = (likes|default([]))|length > 0 %}
  1771.     <div
  1772.       class="gift-button"
  1773.       id="gift-button-trigger"
  1774.       data-has-favorites="{{ showGiftButton ? '1' : '0' }}"
  1775.       style="cursor: pointer; {{ showGiftButton ? '' : 'display:none;' }}"
  1776.     >
  1777.       <i id="gift-icon-payment" class="bi bi-gift gift-pulse"></i>
  1778.       <label
  1779.         id="giftCount"
  1780.         class="labelGiftCount gift-count-bounce"
  1781.         style="background-color: #f56040"
  1782.       >
  1783.         {{ (likes|default([]))|length }}
  1784.       </label>
  1785.       <!-- Message flottant attractif -->
  1786.       <div class="gift-tooltip" id="giftTooltip">
  1787.         <div class="gift-tooltip-content">
  1788.           <div class="gift-tooltip-header">
  1789.             <i class="bi bi-clock-history"></i>
  1790.             <strong>Offre limitée !</strong>
  1791.           </div>
  1792.           <p>Commandez vite ! Les photos seront disponibles seulement pendant <strong>6 semaines</strong> après la fin du séjour.</p>
  1793.           <div class="gift-tooltip-cta">
  1794.             <i class="bi bi-lightning-charge"></i>
  1795.             Commander maintenant
  1796.           </div>
  1797.         </div>
  1798.       </div>
  1799.     </div>
  1801.     <!-- Sidebar E-commerce -->
  1802.     <div id="ecommerce-sidebar">
  1803.       <div class="ecommerce-header">
  1804.         <h2 class="ecommerce-title" id="ecommerce-title">
  1805.           🎉 Vos souvenirs favoris sont prêts !
  1806.         </h2>
  1807.         <p class="ecommerce-subtitle" id="ecommerce-subtitle">
  1808.           {{ (likes|default([]))|length }} photos sélectionnées avec amour ❤️
  1809.         </p>
  1810.         <button class="ecommerce-close" onclick="closeEcommerceSidebar()">
  1811.           <i class="bi bi-x"></i>
  1812.         </button>
  1813.       </div>
  1815.       <div class="ecommerce-content">
  1816.         <!-- Bannière d'urgence -->
  1817.         <div class="urgency-banner" id="urgency-banner">
  1818.           <div>
  1819.             <i class="bi bi-clock-history"></i>
  1820.             <strong>⏳ Commandez vite !</strong>
  1821.           </div>
  1822.           <div> Les photos seront disponibles seulement <strong>6 semaines</strong> après la fin du séjour</div>
  1823.           <div class="countdown" id="countdown-timer" style="display: none;">
  1824.             Plus que <span id="days-left">0</span> jours !
  1825.           </div>
  1826.         </div>
  1828.         <!-- Produits recommandés -->
  1829.         <div id="products-container">
  1830.           <!-- Album Photo -->
  1831.           <div class="product-card popular" id="album-card">
  1832.             <div class="product-header">
  1833.               <div class="product-icon">
  1834.                 <img src="/images/produit/Album5sur5-3.jpg" alt="Album Photo Premium" style="width: 100%; height: 100%; object-fit: contain; border-radius: 8px;">
  1835.               </div>
  1836.               <div class="product-info">
  1837.                 <h4>Album Photo Premium</h4>
  1838.                 <div class="product-pricing">
  1839.                   <span class="current-price">24,90€</span>
  1840.                   <span class="original-price">28,90€</span>
  1841.                   <span class="savings">-14%</span>
  1842.                 </div>
  1843.               </div>
  1844.               <div class="product-favorites-indicator" title="Photos favorites sélectionnées">
  1845.                 <i class="bi bi-heart-fill" style="color: #f56040"></i>
  1846.                 <span id="album-fav-count">{{ (likes|default([]))|length }}</span>
  1847.               </div>
  1848.             </div>
  1849.             <p class="product-description">
  1850.               Album photo personnalisé avec vos <strong id="album-count">{{ (likes|default([]))|length }}</strong> photos favorites. Papier de qualité supérieure, reliure rigide.
  1851.             </p>
  1852.             <button class="product-cta" onclick="orderProduct('album')" 
  1853.                     title="Commander l'album photo avec vos photos favorites">
  1854.               <i class="bi bi-cart-plus"></i>
  1855.               Commander l'album
  1856.             </button>
  1857.           </div>
  1859.           <!-- Pack Numérique -->
  1860.           <div class="product-card" id="digital-card">
  1861.             <div class="product-header">
  1862.               <div class="product-icon">
  1863.                 <img src="/images/produit/photoNumerique.jpg" alt="Pack Numérique HD" style="width: 100%; height: 100%; object-fit: contain; border-radius: 8px;">
  1864.               </div>
  1865.               <div class="product-info">
  1866.                 <h4>Pack Numérique HD</h4>
  1867.                 <p class="price">À partir de 3,90€</p>
  1868.               </div>
  1869.                 <div class="product-favorites-indicator" title="Photos favorites sélectionnées">
  1870.                   <i class="bi bi-heart-fill" style="color: #f56040"></i>
  1871.                   <span id="digital-fav-count">{{ (likes|default([]))|length }}</span>
  1872.                 </div>
  1873.             </div>
  1874.             <p class="product-description">
  1875.               Téléchargement immédiat de vos <strong id="digital-count">{{ (likes|default([]))|length }}</strong> photos en haute définition. Qualité professionnelle garantie.
  1876.             </p>
  1877.             <button class="product-cta" onclick="orderProduct('digital')" 
  1878.                     title="Télécharger vos photos en haute définition">
  1879.               <i class="bi bi-download"></i>
  1880.               Télécharger HD
  1881.             </button>
  1882.           </div>
  1884.           <!-- Pochette Tirages -->
  1885.           <div class="product-card" id="prints-card" style="display: none;">
  1886.             <div class="product-header">
  1887.               <div class="product-icon">
  1888.                 <i class="bi bi-images"></i>
  1889.               </div>
  1890.               <div class="product-info">
  1891.                 <h4>Pochette Tirages</h4>
  1892.                 <p class="price">À partir de 9,90€</p>
  1893.               </div>
  1894.               <div class="product-favorites-indicator" title="Photos favorites sélectionnées">
  1895.                 <i class="bi bi-heart-fill" style="color: #f56040"></i>
  1896.                 <span>{{ (likes|default([]))|length }}</span>
  1897.               </div>
  1898.             </div>
  1899.             <p class="product-description">
  1900.               <strong id="prints-count">12</strong> tirages photo 10x15cm de vos favoris. Papier brillant professionnel, envoi sous 48h.
  1901.             </p>
  1902.             <button class="product-cta" onclick="orderProduct('prints')" 
  1903.                     title="Commander des tirages photo de vos favoris">
  1904.               <i class="bi bi-printer"></i>
  1905.               Commander les tirages
  1906.             </button>
  1907.           </div>
  1908.         </div>
  1910.         <!-- Réassurance -->
  1911.         <div class="reassurance">
  1912.           <i class="bi bi-shield-check" style="color: #10b981; margin-right: 8px;"></i>
  1913.           <strong>Imprimé en France – satisfaction garantie ✅</strong>
  1914.         </div>
  1915.         
  1916.       </div>
  1917.     </div>
  1919.     <div class="selection-popover" id="selectionPopover">
  1920.       <h4>Votre sélection</h4>
  1921.       <p>Tirages : {{ (likes|default([]))|length }} / 12</p>
  1922.       <p>Numériques : {{ (likes|default([]))|length }} / 15</p>
  1923.       <p>Album : {{ (likes|default([]))|length }} / 20</p>
  1924.       <button class="finalize-button" onclick="openEcommerceSidebar()" 
  1925.               title="Voir les produits disponibles avec vos favoris">
  1926.         <i class="bi bi-gift"></i>
  1927.         Finaliser ma commande
  1928.       </button>
  1929.     </div>
  1930.     
  1931.     <style>
  1932.       /* Amélioration des boutons de produits */
  1933.       .product-cta {
  1934.         background: #3a8d95;
  1935.         border: none;
  1936.         border-radius: 25px;
  1937.         color: white;
  1938.         padding: 12px 24px;
  1939.         font-weight: 600;
  1940.         cursor: pointer;
  1941.         transition: all 0.3s ease;
  1942.         display: flex;
  1943.         align-items: center;
  1944.         gap: 8px;
  1945.         width: 100%;
  1946.         justify-content: center;
  1947.         margin-top: 10px;
  1948.       }
  1949.       
  1950.       .product-cta:hover {
  1951.         transform: translateY(-2px);
  1952.         box-shadow: 0 5px 15px rgba(58, 141, 149, 0.4);
  1953.         background: #2f7a82;
  1954.       }
  1955.       
  1956.       .product-cta:active {
  1957.         transform: translateY(0);
  1958.       }
  1959.       
  1960.       .product-cta:disabled {
  1961.         background: #ccc;
  1962.         cursor: not-allowed;
  1963.         transform: none;
  1964.         box-shadow: none;
  1965.       }
  1966.       
  1967.       .finalize-button {
  1968.         background: linear-gradient(135deg, #e91e63 0%, #ad1457 100%);
  1969.         border: none;
  1970.         border-radius: 25px;
  1971.         color: white;
  1972.         padding: 12px 24px;
  1973.         font-weight: 600;
  1974.         cursor: pointer;
  1975.         transition: all 0.3s ease;
  1976.         display: flex;
  1977.         align-items: center;
  1978.         gap: 8px;
  1979.         width: 100%;
  1980.         justify-content: center;
  1981.         margin-top: 15px;
  1982.       }
  1983.       
  1984.       .finalize-button:hover {
  1985.         transform: translateY(-2px);
  1986.         box-shadow: 0 5px 15px rgba(233, 30, 99, 0.4);
  1987.         background: linear-gradient(135deg, #d81b60 0%, #9c1450 100%);
  1988.       }
  1989.       
  1990.       /* Amélioration des cartes de produits */
  1991.       .product-card {
  1992.         border-radius: 12px;
  1993.         box-shadow: 0 4px 15px rgba(0,0,0,0.1);
  1994.         transition: all 0.3s ease;
  1995.         margin-bottom: 20px;
  1996.         overflow: hidden;
  1997.       }
  1998.       
  1999.       .product-card:hover {
  2000.         transform: translateY(-5px);
  2001.         box-shadow: 0 8px 25px rgba(0,0,0,0.15);
  2002.       }
  2003.       
  2004.       .product-header {
  2005.         display: flex;
  2006.         align-items: center;
  2007.         gap: 15px;
  2008.         padding: 20px;
  2009.         background: #f8f9fa;
  2010.       }
  2011.       
  2012.       .product-icon {
  2013.         width: 60px;
  2014.         height: 60px;
  2015.         border-radius: 8px;
  2016.         overflow: hidden;
  2017.         flex-shrink: 0;
  2018.       }
  2019.       
  2020.       .product-info h4 {
  2021.         margin: 0 0 5px 0;
  2022.         color: #333;
  2023.         font-weight: 600;
  2024.       }
  2025.       
  2026.       .product-pricing {
  2027.         display: flex;
  2028.         align-items: center;
  2029.         gap: 10px;
  2030.         margin: 5px 0;
  2031.       }
  2032.       
  2033.       .current-price {
  2034.         font-size: 1.2rem;
  2035.         font-weight: 700;
  2036.         color: #e91e63;
  2037.       }
  2038.       
  2039.       .original-price {
  2040.         text-decoration: line-through;
  2041.         color: #666;
  2042.         font-size: 0.9rem;
  2043.       }
  2044.       
  2045.       .savings {
  2046.         background: #4caf50;
  2047.         color: white;
  2048.         padding: 2px 8px;
  2049.         border-radius: 12px;
  2050.         font-size: 0.8rem;
  2051.         font-weight: 600;
  2052.       }
  2053.       
  2054.       .product-description {
  2055.         padding: 0 20px 20px 20px;
  2056.         color: #666;
  2057.         line-height: 1.5;
  2058.       }
  2059.       
  2060.       .product-favorites-indicator {
  2061.         display: flex;
  2062.         align-items: center;
  2063.         gap: 5px;
  2064.         background: rgba(245, 96, 64, 0.1);
  2065.         padding: 5px 10px;
  2066.         border-radius: 15px;
  2067.         font-size: 0.9rem;
  2068.         color: #f56040;
  2069.         font-weight: 600;
  2070.       }
  2071.     </style>
  2072.   </div>
  2074.   {# Zone promo - Masquée si pas de photos #}
  2075.   {% if attachementsCount|default(0) > 0 %}
  2076.   
  2077.   {# Calculer si séjour terminé #}
  2078.   {% set isSejourTermine = sejour.dateFinSejour < date() %}
  2079.   {% set finCodeDate = sejour.dateFinCode is defined and sejour.dateFinCode is not null ? sejour.dateFinCode : sejour.dateFinSejour|date_modify('+42 days') %}
  2080.   {% set daysUntilClose = ((finCodeDate|date('U') - 'now'|date('U')) / 86400)|round(0, 'ceil') %}
  2081.   
  2082.   <section id="heroPromo" style="margin: 0; padding: 0;">
  2083.     {# BANDEAU SÉJOUR TERMINÉ - S'affiche pour tout séjour passé #}
  2084.     {% if isSejourTermine %}
  2085.     <div class="promo-banner-termine" id="promoBannerTermine">
  2086.       <div class="promo-banner-content">
  2087.         <span class="promo-banner-icon">🎬</span>
  2088.         <div class="promo-banner-text">
  2089.           {% if daysUntilClose > 0 %}
  2090.             <strong>Séjour terminé — Dernière chance !</strong>
  2091.             Plus que <span class="promo-days">{{ daysUntilClose }}</span> jour{{ daysUntilClose > 1 ? 's' : '' }} pour commander vos souvenirs.
  2092.           {% else %}
  2093.             <strong>Séjour terminé</strong>
  2094.             Créez vos souvenirs : albums, tirages, photos numériques...
  2095.           {% endif %}
  2096.         </div>
  2097.         <a href="{{ path('boutique5sur5') }}" class="promo-banner-cta">Commander</a>
  2098.         <button class="promo-banner-close" onclick="this.parentElement.parentElement.style.display='none'" aria-label="Fermer">×</button>
  2099.       </div>
  2100.     </div>
  2101.     {% else %}
  2102.     {# SLIDER PROMO PREMIUM - Séjour en cours #}
  2103.     <div class="divSliderModern" style="margin: 0; padding: 0; width: 100%; overflow: hidden;">
  2104.       <div class="splide no-padding no-margin" id="imageSlider" style="width: 100%;">
  2105.         <div class="splide__track" style="width: 100%;">
  2106.           <ul class="splide__list" style="width: 100%;">
  2107.             <li class="splide__slide" style="width: 100%;">
  2108.               <div class="slider-content-compact">
  2109.                 <img src="{{ asset('/images/imgSliderEmpty2.png') }}" class="imgslider-compact" alt="Produits souvenirs" />
  2110.                 <div class="slider-text-compact">
  2111.                   <span class="slider-title-compact" style="color: #41a2aa">Ajoutez vos favoris</span>
  2112.                   <span class="slider-subtitle-compact" style="color: #f09e7a">et créez vos souvenirs personnalisés !</span>
  2113.                 </div>
  2114.             </div>
  2115.           </li>
  2116.             <li class="splide__slide" style="width: 100%;">
  2117.               <div class="slider-content-compact">
  2118.                 <img src="{{ asset('/images/imgSliderEmpty1.png') }}" class="imgslider-compact" alt="Livre du séjour" />
  2119.                 <div class="slider-text-compact">
  2120.                   <span class="slider-title-compact" style="color: #f09e7a">Pensez à commander le livre</span>
  2121.                   <span class="slider-subtitle-compact" style="color: #41a2aa">et offrez le plus beau des cadeaux !</span>
  2122.               </div>
  2123.             </div>
  2124.           </li>
  2125.         </ul>
  2126.       </div>
  2127.     </div>
  2128.   </div>
  2129.     {% endif %}
  2130.   </section>
  2131.   {% endif %}
  2132.   {# Fin heroPromo #}
  2133.   
  2134.   <!-- Section de contenu à atteindre après le scroll -->
  2135.   <div
  2136.     class="no-margin"
  2137.     id="scrollTarget"
  2138.     style="width: 100%; background: #ffffff; padding-top: 16px"
  2139.   >
  2140.     <div class="no-margin" id="scrollTarget" style="width: 100%">
  2141.       <!-- Header premium 5sur5 -->
  2142.       <header class="premium-5sur5-day-header" style="padding: 5px 25px; background: #ffffff; border-bottom: 1px solid rgba(65, 162, 170, 0.1); margin-bottom: -15px;">
  2143.         <div class="d-flex justify-content-between align-items-center flex-wrap gap-3">
  2144.           <div class="flex-grow-1">
  2145.             <h5 class="premium-5sur5-day-title" style="margin: 0 0 6px 0; font-size: 1.3rem; font-weight: 700; color: #1a1a1a;">
  2146.               {{ sejour.themSejour }}
  2147.             </h5>
  2148.             <p class="premium-5sur5-day-subtitle" style="margin: 0; font-size: 0.9rem; color: #6b7280; font-weight: 500;">
  2149.                    du {{ sejour.dateDebutSejour|date("d M Y")|replace({"Jan": "janv.", "Feb": "févr.", "Mar": "mars", "Apr": "avr.", "May": "mai", "Jun": "juin", "Jul": "juil.", "Aug": "août", "Sep": "sept.", "Oct.": "oct.", "Nov.": "nov.", "Dec.": "déc."}) }}
  2150.           au {{ sejour.dateFinSejour|date("d M Y")|replace({"Jan": "janv.", "Feb": "févr.", "Mar": "mars", "Apr": "avr.", "May": "mai", "Jun": "juin", "Jul": "juil.", "Aug": "août", "Sep": "sept.", "Oct.": "oct.", "Nov.": "nov.", "Dec.": "déc."}) }}
  2151.               · Code : <span style="color: #41a2aa; font-weight: 600;">{{sejour.codeSejour}}</span>
  2152.             </p>
  2153.         </div>
  2155.           <!-- 🎯 MEDIA TOOLBAR PREMIUM - Style 5sur5 -->
  2156.           <div class="premium-5sur5-actions-group" style="gap: 8px;">
  2157.             <!-- Tout -->
  2158.           <button class="premium-5sur5-action-btn mtb-btn {% if attachementsCount|default(0) > 0 %}active{% endif %}" data-filter="all" title="Tout">
  2159.             <i class="bi bi-grid-3x3-gap-fill"></i>
  2160.             <span>Tout</span>
  2161.             <span class="premium-5sur5-badge" style="background: rgba(65, 162, 170, 0.1); color: #41A2AA;">{{ attachementsCount|default(0) }}</span>
  2162.             </button>
  2164.           <!-- Favoris -->
  2165.           <button 
  2166.             class="premium-5sur5-action-btn mtb-btn {% if nblikes|default(0) == 0 %}favoris-empty{% endif %}" 
  2167.             data-filter="favoris" 
  2168.             title="{% if nblikes|default(0) == 0 %}Pas de favoris pour l'instant{% else %}Mes favoris{% endif %}"
  2169.             {% if nblikes|default(0) == 0 %}disabled{% endif %}
  2170.           >
  2171.             <i class="bi bi-heart-fill" style="color:{% if nblikes|default(0) == 0 %}#cbd5e1{% else %}#f56040{% endif %};"></i>
  2172.             <span>Favoris</span>
  2173.             <span class="favoris-count" id="mesFavCount" data-bind="fav" data-empty-text="Pas de favoris">
  2174.               {% if nblikes|default(0) == 0 %}
  2175.                 <span class="favoris-empty-text" style="color: #94a3b8; font-style: italic; font-size: 11px;">Pas de favoris</span>
  2176.               {% else %}
  2177.                 <span class="premium-5sur5-badge" style="background: rgba(245, 96, 64, 0.1); color: #F56040;">{{ nblikes }}</span>
  2178.               {% endif %}
  2179. </span>
  2180.             </button>
  2182.           <!-- Vocal -->
  2183.           <button class="premium-5sur5-action-btn mtb-btn" data-filter="audio" title="Messages vocaux">
  2184.             <span class="icon-telephone-voicemail" style="display: inline-flex; align-items: center; gap: 0;">
  2185.               <i class="bi bi-telephone-fill" style="color:#ffd700; font-size: 14px;"></i>
  2186.               <i class="bi bi-voicemail" style="color:#ffd700; font-size: 14px; margin-left: -4px;"></i>
  2187.             </span>
  2188.             <span>Vocal</span>
  2189.             <span class="mtb-count premium-5sur5-badge" data-bind="audio" style="background: rgba(255, 215, 0, 0.15); color: #ffa500;">0</span>
  2190.             </button>
  2191.           </div>
  2192.         </div>
  2193.       </header>
  2195.         <!-- Navigation par jours - Style Premium compact -->
  2196.         <div class="section-days" style="background: #f8fafb; border-radius: 0px; padding: 10px 12px; margin: 12px 0 16px 0; border: 1px solid rgba(65, 162, 170, 0.1);">
  2197.           <div class="date-navigation d-flex align-items-center justify-content-center" style="gap: 0;">
  2198.             <div class="date-container d-flex" style="overflow-x: auto; overflow-y: hidden; gap: 10px; padding: 4px 0; scrollbar-width: thin; scrollbar-color: #41a2aa #f0f0f0;">
  2199.               {% for x, groupAttach in listeattach %}
  2200.                 {% set xDate = date(x) %}
  2201.                 {% set finDate = date(sejour.dateFinSejour) %}
  2202.                 {% set todayStr = 'now'|date('Y-m-d') %}
  2203.                 {% set currentDateStr = xDate|date('Y-m-d') %}
  2204.                 
  2205.                 {% if xDate <= finDate %}
  2206.                   {# États du jour : passé / courant / futur #}
  2207.                   {% set isPast = currentDateStr < todayStr %}
  2208.                   {% set isCurrent = currentDateStr == todayStr %}
  2209.                   {% set isFuture = currentDateStr > todayStr %}
  2210.                   {% set isFirstDay = groupAttach.isFirstDay == "yes" %}
  2211.                   {% set isLastDay = groupAttach.isLastDay == "yes" %}
  2212.                   
  2213.                   {# Classes premium #}
  2214.                   {% set cardClasses = ['date-card', 'premium-day-card'] %}
  2215.                   {% if isFuture %}
  2216.                     {% set cardClasses = cardClasses|merge(['premium-day-future', 'notclickable']) %}
  2217.                   {% elseif isCurrent %}
  2218.                     {% set cardClasses = cardClasses|merge(['premium-day-current', 'active']) %}
  2219.                   {% else %}
  2220.                     {% set cardClasses = cardClasses|merge(['premium-day-past']) %}
  2221.                     {% if loop.last and not isCurrent %}
  2222.                       {% set cardClasses = cardClasses|merge(['active']) %}
  2223.                     {% endif %}
  2224.                   {% endif %}
  2226.                   <div
  2227.                     class="{{ cardClasses|join(' ') }} position-relative"
  2228.                     id="iconedemoP{{ loop.index }}"
  2229.                     {% if isFuture %}
  2230.                       data-tooltip="Ce jour n'est pas encore accessible"
  2231.                       aria-disabled="true"
  2232.                     {% else %}
  2233.                     data-bs-toggle="collapse"
  2234.                     data-bs-target="#demP{{ loop.index }}"
  2235.                       data-day-id="{{ currentDateStr }}"
  2236.                       aria-expanded="false"
  2237.                       aria-controls="demP{{ loop.index }}"
  2238.                     tabindex="0"
  2239.                     {% endif %}
  2240.                   >
  2241.                     {# Badge pour premier/dernier jour #}
  2242.                     {% if groupAttach.isFirstDay == "yes" %}
  2243.                       <span class="badge bg-success text-white position-absolute" style="top: 5px; left: 5px; font-size: 0.5rem; padding: 0.2rem 0.2rem;">
  2244.                         <i class="bi bi-play-fill me-1"></i>
  2245.                       </span>
  2246.                     {% elseif groupAttach.isLastDay == "yes" %}
  2247.                       <span class="badge bg-info text-white position-absolute" style="top: 5px; left: 5px; font-size: 0.5rem; padding: 0.2rem 0.2rem;">
  2248.                         <i class="bi bi-flag-fill ms-1"></i>
  2249.                       </span>
  2250.                     {% endif %}
  2251.                     
  2252.                     <div class="card-content text-center">
  2253.                       <span class="day">
  2254.                        {{ xDate|date("D")|replace({
  2255.                           "Mon": "lun.", "Tue": "mar.", "Wed": "mer.",
  2256.                           "Thu": "jeu.", "Fri": "ven.", "Sat": "sam.",
  2257.                           "Sun": "dim."
  2258.                         }) }}  
  2259.                       </span>
  2260.                       <span class="full-date">
  2261.                         {{ xDate|date("d M Y")|replace({
  2262.                           "Jan": "janv.", "Feb": "fév.", "Mar": "mars",
  2263.                           "Apr": "avr.",  "May": "mai",   "Jun": "juin",
  2264.                           "Jul": "juil.", "Aug": "août",  "Sep": "sept.",
  2265.                           "Oct": "oct.",  "Nov": "nov.",  "Dec": "déc."
  2266.                         }) }}
  2267.                       </span>
  2268.                       <ul class="media-list-horizontal">
  2269.                         {% if groupAttach.countPhotos > 0 %}
  2270.                           <li><i class="bi bi-camera"></i> {{ groupAttach.countPhotos }}</li>
  2271.                         {% endif %}
  2272.                         {% if groupAttach.countAudio > 0 %}
  2273.                           <li><i class="bi bi-mic-fill"></i> {{ groupAttach.countAudio }}</li>
  2274.                         {% endif %}
  2275.                         {% if groupAttach.countVideos > 0 %}
  2276.                           <li><i class="bi bi-camera-video"></i> {{ groupAttach.countVideos }}</li>
  2277.                         {% endif %}
  2278.                       </ul>
  2279.                     </div>
  2280.                   </div>
  2281.                 {% endif %}
  2282.               {% endfor %}
  2283.             </div>
  2284.           </div>
  2285.         </div>
  2287.     <!-- Carte produit flottante -->
  2288.     <div id="dynamic-card" class="dynamic-card" style="display:none">
  2289.       <div id="dynamic-card-content" class="dynamic-card-content" >
  2290.         <!-- Le contenu dynamique (album, pochette, montage vidéo) sera injecté ici -->
  2291.       </div>
  2292.     </div>
  2294.     <!-- Descriptions and Attachments avec sidebar B2C -->
  2295.     <div class="container-xxl" style="padding: 0 25px;  margin: 0 auto;">
  2296.       <div class="row g-2 col-md-12" style="margin: 0;">
  2297.         <div class="col-lg-12 col-md-12" style="padding: 0;">
  2298.           {# Galerie principale #}
  2299.           <div class="container--gallery modern" data-anchor="gallery" style="padding: 0;">
  2300.             {% set lastValidIndex = 0 %}
  2301.             {% set hasAttachments = false %}
  2302.       {% for x, groupAttach in listeattach %}
  2303.       {% set xDate = date(x) %}
  2304.       {% set finDate = date(sejour.dateFinSejour) %}
  2305.       {% if xDate <= finDate %}
  2306.       {% set lastValidIndex = loop.index %}
  2307.       {% set hasAttachments = true %}
  2308.       <div
  2309.         id="demP{{ loop.index }}"
  2310.         class="collapse {% if loop.last and xDate <= finDate %}show{% endif %}"
  2311.         style="padding: 12px 0;"
  2312.       >
  2313.         <div >
  2314.         <div class="entry-header" style="
  2315.     display: none;
  2316.     align-items: center;
  2317.     justify-content: space-between;
  2318.     background: #ffffff;
  2319.     padding: 8px 15px;
  2320.     border-radius: 10px;
  2321.     margin-bottom: 20px;
  2322.     box-shadow: 0 2px 8px rgba(0,0,0,0.05);
  2323.     border-bottom: 1px solid #eee;
  2324.     flex-wrap: wrap;
  2325. ">
  2327.  
  2328.  
  2329.   <!-- Centre : Date + Médias -->
  2330.   <div style="
  2331.       flex-grow: 1;
  2332.       display: flex;
  2333.       align-items: center;
  2334.       justify-content: center;
  2335.       flex-wrap: wrap;
  2336.       gap: 12px;
  2337.   ">
  2338.     <!-- Date -->
  2339.     <div style="font-weight: bold; font-size: 16px; color: #333;">
  2340.       {{ x|date("l d F Y")|replace({
  2341.           "Monday": "Lundi", "Tuesday": "Mardi", "Wednesday": "Mercredi",
  2342.           "Thursday": "Jeudi", "Friday": "Vendredi", "Saturday": "Samedi",
  2343.           "Sunday": "Dimanche",
  2344.           "January": "Janvier", "February": "Février", "March": "Mars",
  2345.           "April": "Avril", "May": "Mai", "June": "Juin",
  2346.           "July": "Juillet", "August": "Août", "September": "Septembre",
  2347.           "October": "Octobre", "November": "Novembre", "December": "Décembre"
  2348.       }) }}
  2349.     </div>
  2351.   <!-- Filtres Médias -->
  2352. <div class="filter-icons" style="display: flex; gap: 8px; flex-wrap: wrap;">
  2353.     <span class="filter-badge active" data-filter="all" title="Afficher tout">
  2354.         <i class="bi bi-grid-3x3-gap-fill" style="margin-right: 5px; font-size: 14px;"></i> Tout
  2355.     </span>
  2357.     {% if groupAttach.countPhotos > 0 %}
  2358.     <span class="filter-badge" data-filter="photo" title="Filtrer les photos">
  2359.         <i class="bi bi-image" style="margin-right: 5px; font-size: 14px;"></i> {{ groupAttach.countPhotos }}
  2360.     </span>
  2361.     {% endif %}
  2363.     {% if groupAttach.countVideos > 0 %}
  2364.     <span class="filter-badge" data-filter="video" title="Filtrer les vidéos">
  2365.         <i class="bi bi-camera-video-fill" style="margin-right: 5px; font-size: 14px;"></i> {{ groupAttach.countVideos }}
  2366.     </span>
  2367.     {% endif %}
  2369.     {% if groupAttach.countAudio > 0 %}
  2370.     <span class="filter-badge" data-filter="audio" title="Filtrer les messages audio">
  2371.         <i class="bi bi-mic-fill" style="margin-right: 5px; font-size: 14px;"></i> {{ groupAttach.countAudio }}
  2372.     </span>
  2373.     {% endif %}
  2374. </div>
  2376.   </div>
  2382.    
  2383.    
  2384.         </div>
  2386.   <!-- Bouton Jour Suivant -->
  2389.         <!-- Contenu -->
  2390.         <div class="entry-content" id="TourContent">
  2391.           <!-- Dropdown de filtrage par jour -->
  2392.           <div class="day-filter-dropdown" data-day-index="{{ loop.index }}">
  2393.             <button class="filter-toggle" type="button" aria-label="Options de filtrage">
  2394.               <i class="bi bi-three-dots"></i>
  2395.             </button>
  2396.             <div class="filter-dropdown-menu">
  2397.               <div class="filter-option active" data-filter="all">
  2398.                 <i class="bi bi-grid-3x3-gap-fill"></i>
  2399.                 <span>Tout</span>
  2400.                 <span class="count" data-count-all>0</span>
  2401.               </div>
  2402.               <div class="filter-option" data-filter="photo">
  2403.                 <i class="bi bi-image"></i>
  2404.                 <span>Photos</span>
  2405.                 <span class="count" data-count-photo>{{ groupAttach.countPhotos|default(0) }}</span>
  2406.               </div>
  2407.               <div class="filter-option" data-filter="video">
  2408.                 <i class="bi bi-camera-video-fill"></i>
  2409.                 <span>Vidéos</span>
  2410.                 <span class="count" data-count-video>{{ groupAttach.countVideos|default(0) }}</span>
  2411.               </div>
  2412.               <div class="filter-option" data-filter="audio">
  2413.                 <i class="bi bi-mic-fill"></i>
  2414.                 <span>Messages</span>
  2415.                 <span class="count" data-count-audio>{{ groupAttach.countAudio|default(0) }}</span>
  2416.               </div>
  2417.             </div>
  2418.           </div>
  2419.                {% for description in sejour.jourdescripdate %}
  2420.       {%if   description.datejourphoto|date("m/d/Y") !=""%}{% if
  2421.             description.datejourphoto|date("m/d/Y") == x|date("m/d/Y") %}
  2422.           <p class="description" style="margin-left:2%;width:95%;margin-top:1%;margin-bottom:1%;text-align:left">
  2423.         
  2424.             {{ description.description | nl2br }}
  2425.          
  2426.           </p>   {% endif %} 
  2427.        {%endif%}{% endfor %}
  2428.  
  2429.           <!-- Conteneur des photos et vidéos -->
  2430.           <div
  2431.             class="rowimag no-margin"
  2432.             style="
  2433.               width: 100%;
  2434.               display: flex;
  2435.               flex-wrap: wrap;
  2436.               margin: 0;
  2437.               box-sizing: border-box;
  2438.             "
  2439.           >
  2440.             <!-- Afficher les Photos et Vidéos -->
  2441.             {% for attach in groupAttach.attachments %}
  2442.               {% if attach.libiller == 'photo' %}
  2443.            
  2444.             <div class="column" data-type="{{ attach.libiller }}">
  2445.             
  2446.               <div class="photo-zoom photo-item">
  2447.                 <!-- Image sans lien -->
  2448.                 <img src="{{ attach.path }}" alt="{{ attach.descreption }}" loading="lazy" decoding="async" />
  2450.                 <!-- Icône "voir" pour ouvrir le slider -->
  2451.                 <div class="view-icon" onclick="viewImage('{{ attach.id_attchment }}', this)" title="Voir en plein écran">
  2452.                   <i class="bi bi-eye-fill"></i>
  2453.                 </div>
  2455.                 <!-- Icône du cœur avec logique existante -->
  2456.                 <div
  2457.                   class="heart-icon"
  2458.                   id="coeur{{ attach.id_attchment }}"
  2459.                   data-id="{{ attach.id_attchment }}"
  2460.                   data-sejour-id="{{ sejour.id }}"
  2461.                   data-path="{{ attach.path }}"
  2462.                   data-description="{{ attach.descreption }}"
  2463.                 >
  2464.                   {% if app.user %} {% if attach.is_favorite %}
  2465.                   <i
  2466.                     class="bi bi-heart-fill"
  2467.                     title="Sélectionnée"
  2468.                     style="color: #f56040"
  2469.                   ></i>
  2470.                   {% else %}
  2471.                   <i class="bi bi-heart" title="Ajouter à ma sélection"></i>
  2472.                   {% endif %} {% endif %}
  2473.                 </div>
  2474.                 <div class="photo-actions" style="display: none">
  2475.                   <button class="menu-btn">⋮</button>
  2476.                   <div class="menu-options">
  2477.                     <button onclick="addToPack('tirage')">
  2478.                       🖨️ Ajouter au tirage
  2479.                     </button>
  2480.                     <button onclick="addToPack('numerique')">
  2481.                       💾 Ajouter au numérique
  2482.                     </button>
  2483.                   </div>
  2484.                 </div>
  2485.               
  2486.               </div>
  2487.               {% if attach.descreption != "" %}
  2488.               <h4 class="description">{{ attach.descreption }}</h4>
  2489.               {% endif %}
  2490.             </div>
  2494.             {% endif %} 
  2497.              {% if attach.libiller == 'video' %}
  2498.            
  2499.             <div class="column" data-type="{{ attach.libiller }}">
  2500.                  
  2501.             
  2502.                  <div class="video-container" style="position: relative; display: inline-block; width: 100%; border-radius: 8px; overflow: hidden;">
  2503.                         <video class="photo-zoom" controls controlslist="nodownload noplaybackrate" style="width: 100%;">
  2504.                           <source src="{{ attach.path }}" type="video/mp4" />
  2505.                           Votre navigateur ne supporte pas la lecture vidéo.
  2506.                         </video>
  2507.                       
  2508.                       </div>
  2509.               {% if attach.descreption != "" %}
  2510.               <h4 class="description">{{ attach.descreption }}</h4>
  2511.               {% endif %}
  2512.             </div>
  2513.             {% endif %} 
  2514.             
  2515.             {% endfor %}
  2516.           </div>
  2518.           <!-- Section séparée pour les messages audio -->
  2519.           {% if groupAttach.countAudio > 0 %}
  2520.           <div class="audio-messages-section" style="margin-top:15px; border-top: 1px solid #eee; padding: 30px;">
  2521.             <h4 style="margin-bottom: 15px; color: #555">
  2522.             
  2523.               <i class="bi bi-mic-fill" style="margin-right: 8px; color: #ffa500"></i>
  2524.               Messages vocaux ({{ groupAttach.countAudio }})
  2525.             </h4>
  2526.             
  2527.             {% if sejour.codeSejour|slice(0, 2) == 'PF' %}
  2528.               {# Les séjours commençant par PF ont toujours accès #}
  2529.               <div class="audio-messages-container" data-type="audio" style="display: flex; flex-wrap: wrap; gap: 15px">
  2530.                 {% for attach in groupAttach.attachments %}
  2531.                   {% if attach.libiller == 'message' %}
  2532.                     <div class="audio-message-item" data-type="audio" style="background: #f9f9f9; border-radius: 8px; padding: 12px; display: flex; flex-direction: column; width: calc(33.33% - 10px); min-width: 250px; flex-grow: 1;">
  2533.                       <div class="audio-player-container" style="display: flex; align-items: center; margin-bottom: 10px;">
  2534.                         <i class="bi bi-mic-fill" style="font-size: 20px; margin-right: 10px; color: #ffa500"></i>
  2535.                         <audio controls controlslist="nodownload noplaybackrate" style="flex: 1">
  2536.                           <source src="{{ attach.path }}" type="audio/mp3" />
  2537.                           Votre navigateur ne supporte pas la lecture audio.
  2538.                         </audio>
  2539.                       </div>
  2540.                       {% if attach.descreption != "" %}
  2541.                         <div class="audio-description" style="padding-left: 30px">
  2542.                           <p style="margin: 0; font-size: 14px; color: #555; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%;">
  2543.                             {{ attach.descreption }}
  2544.                           </p>
  2545.                         </div>
  2546.                       {% endif %}
  2547.                     </div>
  2548.                   {% endif %}
  2549.                 {% endfor %}
  2550.               </div>
  2551.             
  2552.             {% elseif sejour.codeSejour|slice(0, 2) == 'PP' and parentsejour.payment  == 1 or sejour.codeSejour|slice(0, 2) == 'EF' and parentsejour.payment  == 1 %}
  2553.               {# PP ou EF avec paiement effectué #}
  2554.               <div class="audio-messages-container" data-type="audio" style="display: flex; flex-wrap: wrap; gap: 15px">
  2555.                 {% for attach in groupAttach.attachments %}
  2556.                   {% if attach.libiller == 'message' %}
  2557.                     <div class="audio-message-item" data-type="audio" style="background: #f9f9f9; border-radius: 8px; padding: 12px; display: flex; flex-direction: column; width: calc(33.33% - 10px); min-width: 250px; flex-grow: 1;">
  2558.                       <div class="audio-player-container" style="display: flex; align-items: center; margin-bottom: 10px;">
  2559.                         <i class="bi bi-mic-fill" style="font-size: 20px; margin-right: 10px; color: #ffa500"></i>
  2560.                         <audio controls controlslist="nodownload noplaybackrate" style="flex: 1">
  2561.                           <source src="{{ attach.path }}" type="audio/mp3" />
  2562.                           Votre navigateur ne supporte pas la lecture audio.
  2563.                         </audio>
  2564.                       </div>
  2565.                       {% if attach.descreption != "" %}
  2566.                         <div class="audio-description" style="padding-left: 30px">
  2567.                           <p style="margin: 0; font-size: 14px; color: #555; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%;">
  2568.                             {{ attach.descreption }}
  2569.                           </p>
  2570.                         </div>
  2571.                       {% endif %}
  2572.                     </div>
  2573.                   {% endif %}
  2574.                 {% endfor %}
  2575.               </div>
  2576.             
  2577.             {% elseif sejour.codeSejour|slice(0, 2) == 'PP' and parentsejour.payment == 0 or sejour.codeSejour|slice(0, 2) == 'EF' and parentsejour.payment == 0 %}
  2578.               {# PP ou EF sans paiement - message d'accès limité et audio désactivés #}
  2579.               <div class="audio-messages-container" style="display: flex; flex-wrap: wrap; gap: 15px; opacity: 0.5; pointer-events: none; filter: grayscale(100%);">
  2580.                 <div class="audio-messages-restricted" data-type="audio" style="padding: 20px; background: #f0f0f0; border-radius: 8px; text-align: center; margin-bottom: 15px; width: 100%;">
  2581.                   <i class="bi bi-lock-fill" style="font-size: 24px; color: #808080; margin-bottom: 10px;"></i>
  2582.                   <p style="margin: 0; color: #555;">📢 Les messages vocaux sont disponibles via la boîte vocale premium. Un paiement est requis pour l’activer et y accéder.</p>
  2583.                 </div>
  2584.                 {% for attach in groupAttach.attachments %}
  2585.                   {% if attach.libiller == 'message' %}
  2586.                     <div class="audio-message-item" data-type="audio" style="background: #f9f9f9; border-radius: 8px; padding: 12px; display: flex; flex-direction: column; width: calc(33.33% - 10px); min-width: 250px; flex-grow: 1;">
  2587.                       <div class="audio-player-container" style="display: flex; align-items: center; margin-bottom: 10px;">
  2588.                         <i class="bi bi-mic-fill" style="font-size: 20px; margin-right: 10px; color: #ffa500"></i>
  2589.                         <audio controls controlslist="nodownload noplaybackrate" style="flex: 1" disabled>
  2590.                           <source src="{{ attach.path }}" type="audio/mp3" />
  2591.                           Votre navigateur ne supporte pas la lecture audio.
  2592.                         </audio>
  2593.                       </div>
  2594.                       {% if attach.descreption != "" %}
  2595.                         <div class="audio-description" style="padding-left: 30px">
  2596.                           <p style="margin: 0; font-size: 14px; color: #555; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%;">
  2597.                             {{ attach.descreption }}
  2598.                           </p>
  2599.                         </div>
  2600.                       {% endif %}
  2601.                     </div>
  2602.                   {% endif %}
  2603.                 {% endfor %}
  2604.               </div>
  2605.             {% endif %}
  2606.           </div>
  2607.         {% endif %}
  2608.         </div>
  2609.       </div>
  2610.     </div>
  2611.     {% endif %}
  2612.     {% endfor %}
  2613.     {% if not hasAttachments %}
  2614.   <section class="stay-empty-wrapper">
  2615.   <div class="stay-empty-card">
  2617.       <h2 class="stay-empty-title">Aucune photo pour le moment, c'est normal.</h2>
  2619.     <p class="stay-empty-intro">
  2620.         Le séjour démarre et l'équipe est pleinement avec les enfants : installation, découverte des lieux, premiers temps de vie de groupe.<br>
  2621.         Les premières photos ou messages vocaux sont généralement publiés en fin de journée d'arrivée ou le lendemain matin.
  2622.       </p>
  2624.       <!-- Bloc "Ce qui va arriver" + illustration -->
  2625.       <div class="stay-empty-expect">
  2626.         <div class="stay-empty-expect-content">
  2627.           <p class="stay-empty-expect-label">Ce qui va arriver dans les prochaines heures :</p>
  2628.       <ul class="stay-empty-list">
  2629.         <li>
  2630.               <span class="stay-empty-list-icon stay-empty-list-icon--check">
  2631.                 <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
  2632.                   <polyline points="20 6 9 17 4 12"/>
  2633.                 </svg>
  2634.               </span>
  2635.               <span>1 photo ou message « Bien arrivés »</span>
  2636.         </li>
  2637.         <li>
  2638.               <span class="stay-empty-list-icon stay-empty-list-icon--photos">
  2639.                 <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  2640.                   <rect x="3" y="3" width="18" height="18" rx="2" ry="2"/>
  2641.                   <circle cx="8.5" cy="8.5" r="1.5"/>
  2642.                   <polyline points="21 15 16 10 5 21"/>
  2643.                 </svg>
  2644.               </span>
  2645.               <span>Quelques photos du lieu et du groupe</span>
  2646.         </li>
  2647.         <li>
  2648.               <span class="stay-empty-list-icon stay-empty-list-icon--vocal">
  2649.                 <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  2650.                   <path d="M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z"/>
  2651.                   <path d="M19 10v2a7 7 0 0 1-14 0v-2"/>
  2652.                 </svg>
  2653.               </span>
  2654.               <span>Un message vocal dès que le programme le permet</span>
  2655.         </li>
  2656.       </ul>
  2657.         </div>
  2659.         <!-- Illustration compacte -->
  2660.         <div class="stay-empty-illustration">
  2661.           <svg class="stay-empty-phone" viewBox="0 0 120 200" fill="none" xmlns="http://www.w3.org/2000/svg">
  2662.             <rect x="0" y="0" width="120" height="200" rx="18" fill="#1A1A2E"/>
  2663.             <rect x="6" y="10" width="108" height="180" rx="14" fill="#fff"/>
  2664.             <rect x="12" y="22" width="44" height="44" rx="8" fill="#F09E7A" opacity="0.2"/>
  2665.             <rect x="62" y="22" width="46" height="44" rx="8" fill="#41A2AA" opacity="0.2"/>
  2666.             <rect x="12" y="72" width="96" height="56" rx="8" fill="#9B8BF4" opacity="0.15"/>
  2667.             <circle cx="34" cy="44" r="10" fill="#F09E7A"/>
  2668.             <path d="M29 47l4-5 3 3 4-5 5 7H29z" fill="#fff"/>
  2669.             <circle cx="85" cy="44" r="10" fill="#41A2AA"/>
  2670.             <path d="M82 41v6M85 38v9M88 42v4" stroke="#fff" stroke-width="2" stroke-linecap="round"/>
  2671.             <circle cx="60" cy="100" r="12" fill="rgba(255,255,255,0.9)"/>
  2672.             <path d="M56 94l10 6-10 6V94z" fill="#9B8BF4"/>
  2673.             <rect x="12" y="138" width="96" height="44" rx="8" fill="#F8FAFB"/>
  2674.             <circle cx="34" cy="160" r="8" fill="#E5E9F0"/>
  2675.             <circle cx="60" cy="160" r="8" fill="#41A2AA"/>
  2676.             <circle cx="86" cy="160" r="8" fill="#E5E9F0"/>
  2677.             <rect x="42" y="4" width="36" height="5" rx="2.5" fill="#1A1A2E"/>
  2678.           </svg>
  2680.           <div class="stay-empty-bubble stay-empty-bubble--arrived">
  2681.             <span class="stay-empty-bubble-icon">
  2682.               <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
  2683.                 <polyline points="20 6 9 17 4 12"/>
  2684.               </svg>
  2685.             </span>
  2686.             Bien arrivés !
  2687.           </div>
  2689.           <div class="stay-empty-bubble stay-empty-bubble--photos">
  2690.             <span class="stay-empty-bubble-icon">
  2691.               <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  2692.                 <rect x="3" y="3" width="18" height="18" rx="2" ry="2"/>
  2693.                 <circle cx="8.5" cy="8.5" r="1.5"/>
  2694.                 <polyline points="21 15 16 10 5 21"/>
  2695.               </svg>
  2696.             </span>
  2697.             +12 photos
  2698.           </div>
  2700.           <span class="stay-empty-illustration-label">Exemple de nouvelles à venir</span>
  2701.         </div>
  2702.       </div>
  2704.       <!-- Note rassurante -->
  2705.       <div class="stay-empty-reassurance">
  2706.         <svg class="stay-empty-reassurance-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  2707.           <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/>
  2708.         </svg>
  2709.         <p>En cas de besoin important, l'école ou l'organisateur vous contactera directement, comme d'habitude.</p>
  2710.       </div>
  2712.       <!-- CTA -->
  2713.       <div class="stay-empty-footer">
  2714.         <a href="{{ path('ParametresParent') }}" class="stay-empty-cta">
  2715.           <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  2716.             <path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"/>
  2717.             <path d="M13.73 21a2 2 0 0 1-3.46 0"/>
  2718.           </svg>
  2719.           Gérer mes notifications
  2720.         </a>
  2721.     </div>
  2723.   </div>
  2724. </section>
  2725.   <div style="height: 200px;"></div>
  2726.     {% endif %}
  2727.     
  2728.     <!-- JavaScript pour les pills et la gestion du nouveau contenu -->
  2729.     <script>
  2730.       document.addEventListener('DOMContentLoaded', function() {
  2731.         // Valider les liens de produits au chargement
  2732.         setTimeout(() => {
  2733.           if (typeof window.validateProductLinks === 'function') {
  2734.             window.validateProductLinks();
  2735.           }
  2736.         }, 1000);
  2737.         
  2738.         // ⚡ OPTIMISATION: Event delegation avec throttling pour éviter les clics multiples
  2739.         let clickThrottleTimeout = null;
  2740.         document.addEventListener('click', function(e) {
  2741.           // Throttling pour éviter les clics multiples rapides
  2742.           if (clickThrottleTimeout) return;
  2743.           
  2744.           const pill = e.target.closest('.stat-pill');
  2745.           if (pill) {
  2746.             clickThrottleTimeout = setTimeout(() => {
  2747.               clickThrottleTimeout = null;
  2748.             }, 100);
  2749.             
  2750.             // ⚡ OPTIMISÉ: Une seule boucle pour gérer les états actifs
  2751.             const statPills = document.querySelectorAll('.stat-pill');
  2752.             for (let i = 0; i < statPills.length; i++) {
  2753.               const p = statPills[i];
  2754.               if (p && p.classList) {
  2755.                 if (p === pill) {
  2756.                   p.classList.add('active');
  2757.                 } else {
  2758.                   p.classList.remove('active');
  2759.                 }
  2760.               }
  2761.             }
  2762.             
  2763.             // Déclencher le filtrage du contenu
  2764.             const filter = pill.getAttribute('data-filter');
  2765.             if (typeof window.filterContent === 'function') {
  2766.               window.filterContent(filter);
  2767.             }
  2768.           }
  2769.         });
  2771.         // Fonction de filtrage du contenu - globale
  2772.         window.filterContent = function(filter) {
  2773.           // ⚡ OPTIMISÉ: Suppression des console.log en production
  2774.           if (window.location.hostname === 'localhost' || window.location.hostname.includes('dev')) {
  2775.             console.log('Filtrage par:', filter);
  2776.           }
  2777.           
  2778.           const dateNavigation = document.querySelector('.date-navigation');
  2779.           const sectionDays = document.querySelector('.section-days');
  2780.           
  2781.           if (filter === 'favoris') {
  2782.             // Afficher la vue des favoris
  2783.             showFavoritesView();
  2784.           } else if (filter === 'audio') {
  2785.             // Afficher la vue des messages audio
  2786.             showAudiosView();
  2787.           } else if (filter === 'photos') {
  2788.             // Ouvrir le carrousel du jour actif ou du dernier jour
  2789.             openCurrentDayCarousel();
  2790.           } else {
  2791.             // Restaurer la vue normale des jours
  2792.             showDaysView();
  2793.           }
  2794.         }
  2796.         // Fonction pour afficher la vue des favoris - globale
  2797.         window.showFavoritesView = function() {
  2798.           const sectionDays = document.querySelector('.section-days');
  2799.           const containerGallery = document.querySelector('.container--gallery');
  2800.           
  2801.           // Masquer le container gallery
  2802.           if (containerGallery) {
  2803.             containerGallery.style.display = 'none';
  2804.           }
  2805.           
  2806.           // Mettre à jour l'état des boutons
  2807.           updatePhotosButtonState('favorites');
  2808.           updateAudioButtonState('favorites');
  2809.           updateFavoritesButtonState('favorites');
  2810.           
  2811.           const favoriteCount = getCurrentFavoriteCount();
  2812.           
  2813.           // sla vue des favoris avec e-commerce
  2814.           const favoritesHTML = `
  2815.             <div class="favorites-ecommerce-view">
  2816.               <!-- Header avec progression -->
  2817.               <div class="favorites-header">
  2818.                 <div class="favorites-title">
  2819.                   <h3>Vos souvenirs sélectionnés</h3>
  2820.                   <span class="favorites-count" id="favorites-count">${favoriteCount} photos</span>
  2821.                 </div>
  2822.                 <button class="btn-back-to-days" onclick="window.showDaysView()">
  2823.                   <i class="bi bi-arrow-left"></i>
  2824.                   Retour aux jours
  2825.                 </button>
  2826.               </div>
  2828.             
  2830.               <!-- Grille des favoris -->
  2831.               <div class="favorites-content">
  2832.                 <div class="favorites-grid" id="favoritesGrid">
  2833.                   ${generateFavoritesGrid()}
  2834.                 </div>
  2835.                 
  2836.                 <!-- CTA discret et premium pour rediriger vers la boutique -->
  2837.                 <a href="{{ path('boutique5sur5') }}" class="premium-cta-subtle" style="margin: 20px 0; padding: 16px 20px; background: rgba(65, 162, 170, 0.04); border: 1px solid rgba(65, 162, 170, 0.15); border-radius: 12px; cursor: pointer; transition: all 0.3s ease; display: flex; align-items: center; justify-content: space-between; gap: 12px; text-decoration: none;">
  2838.                   <div style="display: flex; align-items: center; gap: 12px; flex: 1;">
  2839.                     <div style="width: 40px; height: 40px; background: rgba(65, 162, 170, 0.1); border-radius: 10px; display: flex; align-items: center; justify-content: center; flex-shrink: 0;">
  2840.                       <i class="bi bi-gift" style="font-size: 18px; color: #41A2AA;"></i>
  2841.                     </div>
  2842.                     <div style="flex: 1; min-width: 0;">
  2843.                       <p style="margin: 0; font-size: 14px; font-weight: 600; color: #1a1a1a; line-height: 1.4;">Créer des souvenirs avec vos ${favoriteCount} photos</p>
  2844.                       <p style="margin: 4px 0 0 0; font-size: 12px; color: #6b7280; line-height: 1.4;">Albums, tirages et livres personnalisés</p>
  2845.                     </div>
  2846.                   </div>
  2847.                   <i class="bi bi-chevron-right" style="font-size: 18px; color: #41A2AA; flex-shrink: 0;"></i>
  2848.                 </a>
  2849.               </div>
  2850.             </div>
  2851.           `;
  2852.           
  2853.           sectionDays.innerHTML = favoritesHTML;
  2854.         }
  2856.         // Fonction pour afficher la vue des messages audio - globale
  2857.         window.showAudiosView = function() {
  2858.           const sectionDays = document.querySelector('.section-days');
  2859.           const containerGallery = document.querySelector('.container--gallery');
  2860.           
  2861.           // Masquer le container gallery
  2862.           if (containerGallery) {
  2863.             containerGallery.style.display = 'none';
  2864.           }
  2865.           
  2866.           // Mettre à jour l'état des boutons
  2867.           updatePhotosButtonState('audios');
  2868.           updateAudioButtonState('audios');
  2869.           updateFavoritesButtonState('audios');
  2870.           
  2871.           // Collecter tous les messages audio de tous les jours
  2872.           const allAudioMessages = [];
  2873.           const audioItems = document.querySelectorAll('.audio-message-item[data-type="audio"]');
  2874.           
  2875.           audioItems.forEach(item => {
  2876.             const audio = item.querySelector('audio source');
  2877.             const description = item.querySelector('.audio-description p');
  2878.             const dayContainer = item.closest('[id^="demP"]');
  2879.             let dayTitle = 'Jour inconnu';
  2880.             
  2881.             if (dayContainer) {
  2882.               // Trouver le titre du jour
  2883.               const dayIndex = dayContainer.id.replace('demP', '');
  2884.               const dayCard = document.querySelector(`[data-target="#demP${dayIndex}"]`);
  2885.               if (dayCard) {
  2886.                 dayTitle = dayCard.textContent.trim();
  2887.               } else {
  2888.                 // Essayer de trouver dans les cartes de date
  2889.                 const dateCard = document.querySelector(`.date-card[data-bs-target="#demP${dayIndex}"], .date-card[data-target="#demP${dayIndex}"]`);
  2890.                 if (dateCard) {
  2891.                   const dateText = dateCard.querySelector('.date-text, .card-title, h5, .title-line');
  2892.                   if (dateText) {
  2893.                     dayTitle = dateText.textContent.trim();
  2894.                   }
  2895.                 }
  2896.               }
  2897.             }
  2898.             
  2899.             if (audio) {
  2900.               allAudioMessages.push({
  2901.                 src: audio.src,
  2902.                 description: description ? description.textContent.trim() : '',
  2903.                 day: dayTitle,
  2904.                 isRestricted: item.closest('.audio-messages-container[style*="opacity: 0.5"]') !== null
  2905.               });
  2906.             }
  2907.           });
  2908.           
  2909.           // Créer la vue des messages audio
  2910.           const audiosHTML = `
  2911.             <div class="audios-view">
  2912.               <!-- Header -->
  2913.               <div class="audios-header" style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; padding: 20px; background: #f8f9fa; border-radius: 10px;">
  2914.                 <div class="audios-title">
  2915.                   <h3><span class="icon-telephone-voicemail">
  2916.   <i class="bi bi-telephone-fill tel"  style="color: #ffd700;font-size:1.5em"></i>
  2917.   <i class="bi bi-voicemail vm" style="color: #ffd700;font-size: 0.9rem;
  2918.     transform: translate(-40%, -46%);"></i>
  2919. </span>
  2920.                   <span class="audios-count">${allAudioMessages.length} messages</span>
  2921.                 </div>
  2922.                 <button class="btn-back-to-days" onclick="window.showDaysView()" style="background: #6c757d; color: white; border: none; padding: 8px 16px; border-radius: 5px; cursor: pointer;">
  2923.                   <i class="bi bi-arrow-left"></i>
  2924.                   Retour aux jours
  2925.                 </button>
  2926.               </div>
  2928.               <!-- Grille des messages audio -->
  2929.               <div class="audios-content" style="display: flex; flex-wrap: wrap; gap: 20px;">
  2930.                 ${allAudioMessages.map(msg => `
  2931.                   <div class="audio-message-card" style="background: #f9f9f9; border-radius: 12px; padding: 20px; width: calc(50% - 10px); min-width: 300px; ${msg.isRestricted ? 'opacity: 0.5; filter: grayscale(100%);' : ''}">
  2932.                     ${msg.day && msg.day !== 'Jour inconnu' ? `
  2933.                       <div class="audio-day-tag" style="background: #e9ecef; color: #495057; padding: 4px 8px; border-radius: 15px; font-size: 12px; margin-bottom: 12px; display: inline-block;">
  2934.                         ${msg.day}
  2935.                       </div>
  2936.                     ` : ''}
  2937.                     <div class="audio-player-container" style="display: flex; align-items: center; margin-bottom: 12px;">
  2938.                       <i class="bi bi-mic-fill" style="font-size: 24px; margin-right: 15px; color: #ffa500;"></i>
  2939.                       <audio controls controlslist="nodownload noplaybackrate" style="flex: 1; border-radius: 5px;" ${msg.isRestricted ? 'disabled' : ''}>
  2940.                         <source src="${msg.src}" type="audio/mp3" />
  2941.                         Votre navigateur ne supporte pas la lecture audio.
  2942.                       </audio>
  2943.                     </div>
  2944.                     ${msg.description ? `
  2945.                       <div class="audio-description" style="padding-left: 39px;">
  2946.                         <p style="margin: 0; font-size: 14px; color: #666; line-height: 1.4;">${msg.description}</p>
  2947.                       </div>
  2948.                     ` : ''}
  2949.                     ${msg.isRestricted ? `
  2950.                       <div class="audio-restricted-notice" style="text-align: center; margin-top: 10px; padding: 8px; background: #fff3cd; border-radius: 5px; border: 1px solid #ffeaa7;">
  2951.                         <i class="bi bi-lock-fill" style="color: #856404; margin-right: 5px;"></i>
  2952.                         <small style="color: #856404;">Accès premium requis</small>
  2953.                       </div>
  2954.                     ` : ''}
  2955.                   </div>
  2956.                 `).join('')}
  2957.               </div>
  2958.               
  2959.               ${allAudioMessages.length === 0 ? `
  2960.                 <div class="no-audios" style="text-align: center; padding: 60px 20px; color: #6c757d;">
  2961.                   <i class="bi bi-mic" style="font-size: 4rem; margin-bottom: 20px; opacity: 0.3;"></i>
  2962.                   <h4>Aucun message vocal</h4>
  2963.                   <p>Il n'y a pas encore de messages vocaux dans ce séjour.</p>
  2964.                 </div>
  2965.               ` : ''}
  2966.             </div>
  2967.           `;
  2968.           
  2969.           sectionDays.innerHTML = audiosHTML;
  2970.         }
  2971.         
  2972.         // Variables pour sauvegarder le contenu original
  2973.         let originalDaysContent = null;
  2974.         
  2975.         // Sauvegarder le contenu original au chargement
  2976.         document.addEventListener('DOMContentLoaded', function() {
  2977.           setTimeout(() => {
  2978.             const containerGallery = document.querySelector('.container--gallery');
  2979.             if (containerGallery) {
  2980.               originalDaysContent = containerGallery.outerHTML;
  2981.             }
  2982.           }, 1000);
  2983.         });
  2984.         
  2985.       
  2986.         // Fonction pour ouvrir le carrousel contextuel - globale
  2987.         window.openCurrentDayCarousel = function() {
  2988.           // Détecter la vue active
  2989.           const currentView = detectCurrentView();
  2990.           
  2991.           switch (currentView) {
  2992.             case 'favorites':
  2993.               openFavoritesCarousel();
  2994.               break;
  2995.             case 'audios':
  2996.               // Dans la vue audios, pas de carrousel photos pertinent
  2997.               console.log('Carrousel photos non disponible dans la vue audios');
  2998.               return;
  2999.             case 'days':
  3000.             default:
  3001.               openActiveDayCarousel();
  3002.               break;
  3003.           }
  3004.         }
  3005.         
  3006.         // Fonction pour mettre à jour l'état du bouton photos selon le contexte
  3007.         function updatePhotosButtonState(currentView) {
  3008.           const photosBtn = document.querySelector('.mtb-btn[data-filter="photos"]');
  3009.           if (!photosBtn) return;
  3010.           
  3011.           const btnIcon = photosBtn.querySelector('i');
  3012.           const btnCount = photosBtn.querySelector('.mtb-count');
  3013.           
  3014.           switch (currentView) {
  3015.             case 'favorites':
  3016.               // Dans les favoris : bouton actif, ouvre le carrousel des favoris
  3017.               photosBtn.style.opacity = '1';
  3018.               photosBtn.style.pointerEvents = 'auto';
  3019.               photosBtn.title = 'Voir le carrousel des favoris';
  3020.               if (btnIcon) btnIcon.style.color = '#007bff';
  3021.               if (btnCount) btnCount.style.display = 'none'; // Cacher le compteur
  3022.               break;
  3023.               
  3024.             case 'audios':
  3025.               // Dans les audios : bouton désactivé
  3026.               photosBtn.style.opacity = '0.4';
  3027.               photosBtn.style.pointerEvents = 'none';
  3028.               photosBtn.title = 'Carrousel non disponible dans la vue audios';
  3029.               if (btnIcon) btnIcon.style.color = '#6c757d';
  3030.               if (btnCount) btnCount.style.display = 'none';
  3031.               break;
  3032.               
  3033.             case 'days':
  3034.             default:
  3035.               // Vue normale : utiliser la logique existante du carrousel
  3036.               photosBtn.style.opacity = '1';
  3037.               photosBtn.style.pointerEvents = 'auto';
  3038.               photosBtn.title = 'Voir les photos du jour actif';
  3039.               if (btnIcon) btnIcon.style.color = '';
  3040.               if (btnCount) btnCount.style.display = 'none'; // Cacher le compteur pour éviter la confusion
  3041.               break;
  3042.           }
  3043.         }
  3044.         
  3045.         // Fonction pour mettre à jour l'état du bouton audio selon le contexte
  3046.         window.updateAudioButtonState = function updateAudioButtonState(currentView) {
  3047.           const audioBtn = document.querySelector('.mtb-btn[data-filter="audio"]');
  3048.           if (!audioBtn) return;
  3049.           
  3050.           const btnCount = audioBtn.querySelector('.mtb-count');
  3051.           
  3052.           switch (currentView) {
  3053.             case 'favorites':
  3054.               // Dans les favoris : pas d'action sur le compteur audio
  3055.               break;
  3056.               
  3057.             case 'audios':
  3058.               // Dans les audios : afficher le nombre total calculé par le frontend
  3059.               const totalAudioCount = document.querySelectorAll('.audio-message-item[data-type="audio"]').length;
  3060.               if (btnCount) {
  3061.                 btnCount.textContent = totalAudioCount;
  3062.               }
  3063.               break;
  3064.               
  3065.             case 'days':
  3066.             default:
  3067.               // Vue normale : compter les audios du jour actif
  3068.               const activeDayAudioCount = countActiveDayAudios();
  3069.               if (btnCount) {
  3070.                 btnCount.textContent = activeDayAudioCount;
  3071.               }
  3072.               break;
  3073.           }
  3074.         }
  3075.         
  3076.         // Fonction pour mettre à jour l'état du bouton favoris selon le contexte
  3077.         window.updateFavoritesButtonState = function updateFavoritesButtonState(currentView) {
  3078.           const favoritesBtn = document.querySelector('.mtb-btn[data-filter="favoris"]');
  3079.           if (!favoritesBtn) return;
  3080.           
  3081.           const btnIcon = favoritesBtn.querySelector('i');
  3082.           const btnCount = favoritesBtn.querySelector('.mtb-count');
  3083.           
  3084.           // ✅ IMPORTANT : Le bouton favoris reste TOUJOURS accessible, peu importe la vue
  3085.           switch (currentView) {
  3086.             case 'favorites':
  3087.               // Dans les favoris : bouton actif marqué visuellement
  3088.               favoritesBtn.style.opacity = '1';
  3089.               favoritesBtn.style.pointerEvents = 'auto';
  3090.               favoritesBtn.title = 'Vous êtes dans la vue favoris';
  3091.               if (btnIcon) btnIcon.style.color = '#f56040';
  3092.               if (btnCount) btnCount.style.display = 'inline';
  3093.               favoritesBtn.classList.add('active');
  3094.               break;
  3095.               
  3096.             case 'audios':
  3097.               // Dans les audios : bouton reste actif et accessible ✅
  3098.               favoritesBtn.style.opacity = '1';
  3099.               favoritesBtn.style.pointerEvents = 'auto';
  3100.               favoritesBtn.title = 'Voir les favoris';
  3101.               if (btnIcon) btnIcon.style.color = '#f56040';
  3102.               if (btnCount) btnCount.style.display = 'inline';
  3103.               favoritesBtn.classList.remove('active');
  3104.               break;
  3105.               
  3106.             case 'days':
  3107.             default:
  3108.               // Vue normale : bouton normal et accessible
  3109.               favoritesBtn.style.opacity = '1';
  3110.               favoritesBtn.style.pointerEvents = 'auto';
  3111.               favoritesBtn.title = 'Voir les favoris';
  3112.               if (btnIcon) btnIcon.style.color = '#f56040';
  3113.               if (btnCount) btnCount.style.display = 'inline';
  3114.               favoritesBtn.classList.remove('active');
  3115.               break;
  3116.           }
  3117.         }
  3118.         
  3119.         // Fonction pour compter les audios du jour actif (réutilise la même logique)
  3120.         // ⚡ OPTIMISÉ: Cache des éléments DOM pour éviter les requêtes répétitives
  3121.         let cachedActiveDay = null;
  3122.         let cachedAudioCount = 0;
  3123.         let lastCacheTime = 0;
  3124.         const CACHE_DURATION = 1000; // 1 seconde
  3125.         
  3126.         function countActiveDayAudios() {
  3127.           const now = Date.now();
  3128.           
  3129.           // Utiliser le cache si récent
  3130.           if (cachedActiveDay && (now - lastCacheTime) < CACHE_DURATION) {
  3131.             return cachedAudioCount;
  3132.           }
  3133.           
  3134.           // Trouver le jour actuellement ouvert
  3135.           let activeDay = document.querySelector('.collapse.show[id^="demP"]');
  3136.           
  3137.           // Si aucun jour ouvert, prendre le dernier jour
  3138.           if (!activeDay) {
  3139.             const allDays = document.querySelectorAll('.collapse[id^="demP"]');
  3140.             activeDay = allDays[allDays.length - 1];
  3141.           }
  3142.           
  3143.           if (!activeDay) {
  3144.             cachedActiveDay = null;
  3145.             cachedAudioCount = 0;
  3146.             lastCacheTime = now;
  3147.             return 0;
  3148.           }
  3149.           
  3150.           // Compter les messages audio dans ce jour
  3151.           const audiosInDay = activeDay.querySelectorAll('.audio-message-item[data-type="audio"]');
  3152.           const count = audiosInDay.length;
  3153.           
  3154.           // Mettre à jour le cache
  3155.           cachedActiveDay = activeDay;
  3156.           cachedAudioCount = count;
  3157.           lastCacheTime = now;
  3158.           
  3159.           return count;
  3160.         }
  3161.         
  3162.         // Fonction pour détecter la vue active
  3163.         // ⚡ OPTIMISÉ: Cache de la vue active pour éviter les requêtes DOM répétitives
  3164.         let cachedCurrentView = null;
  3165.         let lastViewCheck = 0;
  3166.         const VIEW_CACHE_DURATION = 500; // 500ms
  3167.         
  3168.         function detectCurrentView() {
  3169.           const now = Date.now();
  3170.           
  3171.           // Utiliser le cache si récent
  3172.           if (cachedCurrentView && (now - lastViewCheck) < VIEW_CACHE_DURATION) {
  3173.             return cachedCurrentView;
  3174.           }
  3175.           
  3176.           let view = 'days';
  3177.           if (document.querySelector('.favorites-ecommerce-view')) {
  3178.             view = 'favorites';
  3179.           } else if (document.querySelector('.audios-view')) {
  3180.             view = 'audios';
  3181.           }
  3182.           
  3183.           // Mettre à jour le cache
  3184.           cachedCurrentView = view;
  3185.           lastViewCheck = now;
  3186.           
  3187.           return view;
  3188.         }
  3189.         
  3190.         // ⚡ OPTIMISÉ: Cache global des éléments DOM fréquemment utilisés
  3191.         const domCache = {
  3192.           favoritesGrid: null,
  3193.           lastFavoritesUpdate: 0,
  3194.           CACHE_DURATION: 2000 // 2 secondes
  3195.         };
  3196.         
  3197.         function getCachedFavorites() {
  3198.           const now = Date.now();
  3199.           if (!domCache.favoritesGrid || (now - domCache.lastFavoritesUpdate) > domCache.CACHE_DURATION) {
  3200.             domCache.favoritesGrid = document.querySelector('.favorites-grid');
  3201.             domCache.lastFavoritesUpdate = now;
  3202.           }
  3203.           return domCache.favoritesGrid;
  3204.         }
  3205.         
  3206.         // Fonction pour ouvrir le carrousel des favoris
  3207.         function openFavoritesCarousel() {
  3208.           const favoritesGrid = getCachedFavorites();
  3209.           const favoriteItems = favoritesGrid ? favoritesGrid.querySelectorAll('.favorite-item') : [];
  3210.           if (favoriteItems.length > 0) {
  3211.             // Trouver le premier favori avec une action de vue
  3212.             const firstFavorite = favoriteItems[0];
  3213.             const viewBtn = firstFavorite.querySelector('.btn-view-favorite');
  3214.             if (viewBtn && viewBtn.onclick) {
  3215.               viewBtn.click();
  3216.             } else {
  3217.               // Fallback : extraire l'ID du data-id et utiliser viewImage
  3218.               const favoriteId = firstFavorite.dataset.id;
  3219.               if (favoriteId && typeof window.viewImage === 'function') {
  3220.                 window.viewImage(favoriteId, firstFavorite);
  3221.               }
  3222.             }
  3223.           } else {
  3224.             console.log('Aucun favori trouvé pour ouvrir le carrousel');
  3225.           }
  3226.         }
  3227.         
  3228.         // Fonction pour ouvrir le carrousel du jour actif
  3229.         function openActiveDayCarousel() {
  3230.           // Trouver le jour actuellement ouvert (avec classe 'show')
  3231.           let activeDay = document.querySelector('.collapse.show[id^="demP"]');
  3232.           
  3233.           // Si aucun jour n'est ouvert, prendre le dernier jour
  3234.           if (!activeDay) {
  3235.             const allDays = document.querySelectorAll('.collapse[id^="demP"]');
  3236.             activeDay = allDays[allDays.length - 1]; // Dernier jour
  3237.           }
  3238.           
  3239.           if (!activeDay) {
  3240.             console.warn('Aucun jour trouvé pour ouvrir le carrousel');
  3241.             return;
  3242.           }
  3243.           
  3244.           // Trouver la première photo de ce jour
  3245.           const viewIcon = activeDay.querySelector('.view-icon[onclick*="viewImage"]');
  3246.           if (viewIcon) {
  3247.             // Extraire l'ID de la photo du onclick
  3248.             const onclickAttr = viewIcon.getAttribute('onclick');
  3249.             const match = onclickAttr.match(/viewImage\('(\d+)'/);
  3250.             if (match) {
  3251.               const imageId = match[1];
  3252.               // Ouvrir le slider avec cette image
  3253.               if (typeof window.viewImage === 'function') {
  3254.                 window.viewImage(imageId, viewIcon);
  3255.               }
  3256.             }
  3257.           } else {
  3258.             // Fallback : chercher dans tous les jours
  3259.             const allDays = document.querySelectorAll('.collapse[id^="demP"]');
  3260.             for (let day of allDays) {
  3261.               const photoInDay = day.querySelector('.view-icon[onclick*="viewImage"]');
  3262.               if (photoInDay) {
  3263.                 photoInDay.click();
  3264.                 break;
  3265.               }
  3266.             }
  3267.           }
  3268.         }
  3270.         // Fonction pour afficher la vue normale des jours - globale
  3271.         window.showDaysView = function() {
  3272.           const sectionDays = document.querySelector('.section-days');
  3273.           const containerGallery = document.querySelector('.container--gallery');
  3274.           
  3275.           // Si la section days contient des vues spéciales (favoris/audios), les supprimer
  3276.           if (sectionDays && (sectionDays.innerHTML.includes('favorites-ecommerce-view') || sectionDays.innerHTML.includes('audios-view'))) {
  3277.             // Restaurer le contenu original si disponible
  3278.             if (originalDaysContent) {
  3279.               sectionDays.innerHTML = originalDaysContent;
  3280.             } else {
  3281.               // Fallback : recharger la page si pas de sauvegarde
  3282.               location.reload();
  3283.               return;
  3284.             }
  3285.           }
  3286.           
  3287.           // Restaurer la visibilité du container gallery
  3288.           if (containerGallery) {
  3289.             containerGallery.style.display = 'block';
  3290.           }
  3291.           
  3292.           // Appeler le filtre "all" pour restaurer l'affichage complet
  3293.           if (typeof window.filterContent === 'function') {
  3294.             window.filterContent('toutVoir');
  3295.           }
  3296.           
  3297.           // Mettre à jour l'état des boutons
  3298.           updatePhotosButtonState('days');
  3299.           updateAudioButtonState('days');
  3300.           updateFavoritesButtonState('days');
  3301.         }
  3303.         // Fonction pour générer les cartes de jours (alternative simple)
  3304.         function generateDaysCards() {
  3305.           // Cette fonction pourrait régénérer les cartes, mais pour simplifier
  3306.           // on recharge la page dans showDaysView()
  3307.           return '';
  3308.         }
  3310.         // Fonction pour revenir à la vue des jours
  3311.      
  3313.         // Fonction pour générer la grille des favoris
  3314.         function generateFavoritesGrid() {
  3315.           const favorites = getFavoriteItems();
  3316.           
  3317.           if (favorites.length === 0) {
  3318.             return `
  3319.               <div class="no-favorites">
  3320.                 <i class="bi bi-heart" style="font-size: 3rem; color: #ccc; margin-bottom: 1rem;"></i>
  3321.                 <h4>Aucun favori sélectionné</h4>
  3322.                 <p>Cliquez sur <i class="bi bi-heart" style="color: #e91e63;"></i> sur vos photos préférées pour les ajouter ici.</p>
  3323.               </div>
  3324.             `;
  3325.           }
  3326.           
  3327.           return favorites.map(item => `
  3328.             <div class="favorite-item photo-item" data-id="${item.id}" style="position: relative; width: 100%; aspect-ratio: 1; border-radius: 12px; overflow: hidden; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); background: #f0f0f0;">
  3329.               ${item.type === 'image' ? 
  3330.                 `<img src="${item.url}" alt="Photo favorite" loading="lazy" style="width: 100%; height: 100%; object-fit: cover; display: block;">` :
  3331.                 item.type === 'video' ? 
  3332.                 `<video src="${item.url}" poster="${item.thumbnail}" style="width: 100%; height: 100%; object-fit: cover; display: block;"></video>
  3333.                  <div class="video-overlay" style="position: absolute; top: 0; left: 0; right: 0; bottom: 0; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,0.3);"><i class="bi bi-play-circle" style="font-size: 48px; color: white;"></i></div>` :
  3334.                 `<div class="audio-item" style="width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; background: linear-gradient(135deg, rgba(65, 162, 170, 0.1) 0%, rgba(245, 96, 64, 0.1) 100%);">
  3335.                    <i class="bi bi-mic-fill" style="font-size: 32px; color: #41A2AA; margin-bottom: 8px;"></i>
  3336.                    <span style="font-size: 14px; color: #6b7280; font-weight: 600;">Audio ${item.duration || '00:00'}</span>
  3337.                  </div>`
  3338.               }
  3339.               <!-- Actions overlay -->
  3340.               <div class="favorite-actions" style="position: absolute; top: 8px; right: 8px; display: flex; gap: 6px; opacity: 0; transition: opacity 0.3s ease;">
  3341.                 <button class="btn-view-favorite" onclick="viewFavorite('${item.id}')" title="Voir en grand" style="width: 32px; height: 32px; border-radius: 8px; background: rgba(255,255,255,0.9); border: none; display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 2px 8px rgba(0,0,0,0.1);">
  3342.                   <i class="bi bi-eye" style="font-size: 14px; color: #41A2AA;"></i>
  3343.                 </button>
  3344.                 <button class="btn-remove-favorite" onclick="removeFavorite('${item.id}')" title="Retirer des favoris" style="width: 32px; height: 32px; border-radius: 8px; background: rgba(255,255,255,0.9); border: none; display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 2px 8px rgba(0,0,0,0.1);">
  3345.                   <i class="bi bi-heart-fill" style="font-size: 14px; color: #f56040;"></i>
  3346.                 </button>
  3347.               </div>
  3348.             </div>
  3349.           `).join('');
  3350.         }
  3352.         // Fonction pour réorganiser la grille des favoris
  3353.         function reorganizeFavoritesGrid() {
  3354.           const favoritesGrid = document.getElementById('favoritesGrid');
  3355.           if (!favoritesGrid) return;
  3356.           
  3357.           const remainingItems = favoritesGrid.querySelectorAll('.favorite-item');
  3358.           if (remainingItems.length === 0) {
  3359.             // Afficher le message "Aucun favori"
  3360.             favoritesGrid.innerHTML = `
  3361.               <div class="no-favorites">
  3362.                 <i class="bi bi-heart" style="font-size: 3rem; color: #ccc; margin-bottom: 1rem;"></i>
  3363.                 <h4>Aucun favori sélectionné</h4>
  3364.                 <p>Cliquez sur <i class="bi bi-heart" style="color: #e91e63;"></i> sur vos photos préférées pour les ajouter ici.</p>
  3365.               </div>
  3366.             `;
  3367.           } else {
  3368.             // Réorganiser les éléments restants avec une animation douce
  3369.             remainingItems.forEach((item, index) => {
  3370.               item.style.transition = 'all 0.3s ease';
  3371.               item.style.order = index;
  3372.             });
  3373.           }
  3374.         }
  3376.         // Fonction pour récupérer les éléments favoris
  3377.         function getFavoriteItems() {
  3378.           const favorites = [];
  3379.           
  3380.           // ⚡ OPTIMISÉ: Cache et parcours plus efficace des favoris
  3381.           const heartIcons = document.querySelectorAll('.heart-icon');
  3382.           for (let i = 0; i < heartIcons.length; i++) {
  3383.             const heartIcon = heartIcons[i];
  3384.             const heartFill = heartIcon.querySelector('.bi-heart-fill');
  3385.             if (heartFill) {
  3386.               const id = heartIcon.getAttribute('data-id');
  3387.               const path = heartIcon.getAttribute('data-path');
  3388.               const description = heartIcon.getAttribute('data-description');
  3389.               
  3390.               if (id && path) {
  3391.                 // Déterminer le type de média
  3392.                 let type = 'image';
  3393.                 let url = path;
  3394.                 let thumbnail = path;
  3395.                 
  3396.                 if (path.includes('.mp4') || path.includes('.mov') || path.includes('.avi')) {
  3397.                   type = 'video';
  3398.                   thumbnail = path.replace(/\.(mp4|mov|avi)$/i, '_thumb.jpg');
  3399.                 } else if (path.includes('.mp3') || path.includes('.wav') || path.includes('.m4a')) {
  3400.                   type = 'audio';
  3401.                   url = path;
  3402.                 }
  3403.                 
  3404.                 // Récupérer la date depuis le conteneur parent
  3405.                 const dateCard = heartIcon.closest('[id^="demP"]');
  3406.                 let date = 'Date inconnue';
  3407.                 if (dateCard) {
  3408.                   const dateElement = dateCard.querySelector('.full-date, .day-title');
  3409.                   if (dateElement) {
  3410.                     date = dateElement.textContent.trim();
  3411.                   }
  3412.                 }
  3413.                 
  3414.                 favorites.push({
  3415.                   id: id,
  3416.                   url: url,
  3417.                   thumbnail: thumbnail,
  3418.                   type: type,
  3419.                   date: date,
  3420.                   description: description || ''
  3421.                 });
  3422.               }
  3423.             }
  3424.           }
  3425.           
  3426.           // ⚡ OPTIMISÉ: Log conditionnel pour réduire l'impact performance
  3427.           if (favorites.length > 0) {
  3428.             console.log('Favoris trouvés:', favorites.length);
  3429.           }
  3430.           return favorites;
  3431.         }
  3433.         // Rendre les fonctions accessibles globalement
  3434.         window.viewFavorite = viewFavorite;
  3435.         window.removeFavorite = removeFavorite;
  3436.         window.getFavoriteItems = getFavoriteItems;
  3438.         // Fonction pour supprimer un favori
  3439.         function removeFavorite(id) {
  3440.          
  3441.           const heartIcon = document.querySelector(`[data-id="${id}"]`);
  3442.          
  3443.           if (heartIcon) {
  3444.             const heartFill = heartIcon.querySelector('.bi-heart-fill');
  3445.             if (heartFill && heartFill.classList) {
  3446.               heartFill.classList.remove('bi-heart-fill');
  3447.               heartFill.classList.add('bi-heart');
  3448.               heartFill.style.color = '';
  3449.             }
  3450.           }
  3451.           const favoriteItem = document.querySelector(`.favorite-item[data-id="${id}"]`);
  3452.         
  3453.           if (favoriteItem) {
  3454.             // Animation de disparition puis suppression complète
  3455.             favoriteItem.style.transition = 'opacity 0.3s ease, transform 0.3s ease';
  3456.             favoriteItem.style.opacity = '0';
  3457.             favoriteItem.style.transform = 'scale(0.8)';
  3458.             
  3459.             setTimeout(() => {
  3460.               favoriteItem.remove();
  3461.               
  3462.               // Appeler la fonction métier si présente
  3463.               const heartIcon = document.querySelector(`#coeur${id}`);
  3464.               const sejourId = heartIcon && heartIcon.dataset.sejourId ? heartIcon.dataset.sejourId : '';
  3465.               supprimerFavoris(id, sejourId);
  3466.               
  3467.               // Mettre à jour les compteurs
  3468.               updateAllFavoriteCounters();
  3469.               
  3470.               // Réorganiser la grille si nécessaire
  3471.               reorganizeFavoritesGrid();
  3472.             }, 300);
  3473.       
  3474.      
  3475.    
  3476.   }
  3477.           
  3478.         }
  3479.         // Slider plein écran pour les favoris
  3480.         class FavoritesSlider {
  3481.           constructor() {
  3482.             this.currentIndex = 0;
  3483.             this.favorites = [];
  3484.             this.isOpen = false;
  3485.             this.touchStartX = 0;
  3486.             this.touchEndX = 0;
  3487.           }
  3489.           open(favoriteId) {
  3490.             console.log('Ouverture du slider pour:', favoriteId);
  3491.             
  3492.             // Récupérer tous les favoris images
  3493.             this.favorites = getFavoriteItems().filter(item => item.type === 'image');
  3494.             
  3495.             if (this.favorites.length === 0) {
  3496.               console.error('Aucun favori image trouvé');
  3497.               return;
  3498.             }
  3500.             // Trouver l'index de l'image courante
  3501.             this.currentIndex = this.favorites.findIndex(fav => fav.id === favoriteId);
  3502.             if (this.currentIndex === -1) this.currentIndex = 0;
  3504.             console.log('Index courant:', this.currentIndex, 'Total:', this.favorites.length);
  3506.             this.createSlider();
  3507.             this.showSlide(this.currentIndex);
  3508.             this.attachEvents();
  3509.             this.isOpen = true;
  3511.             // Animation d'ouverture immédiate pour favoris avec diagnostic
  3512.             setTimeout(() => {
  3513.               if (window.diagnoseSliderDisplay) {
  3514.                 window.diagnoseSliderDisplay('#favoritesSlider');
  3515.               }
  3516.             }, 50);
  3517.           }
  3519.           createSlider() {
  3520.             // ⚡ OPTIMISATION: Créer le slider seulement quand nécessaire
  3521.             if (document.querySelector('#favoritesSlider')) {
  3522.               return; // Déjà créé, ne pas recréer
  3523.             }
  3524.             
  3525.             // Structure HTML minimale et optimisée
  3526.             const sliderHTML = `
  3527.               <div class="favorites-slider" id="favoritesSlider" style="
  3528.                 position: fixed !important; 
  3529.                 top: 0 !important; 
  3530.                 left: 0 !important; 
  3531.                 width: 100% !important; 
  3532.                 height: 100% !important; 
  3533.                 background: rgba(0,0,0,0.95) !important; 
  3534.                 z-index: 9999 !important; 
  3535.                 display: flex !important; 
  3536.                 align-items: center !important; 
  3537.                 justify-content: center !important; 
  3538.                 opacity: 1 !important; 
  3539.                 visibility: visible !important;
  3540.               ">
  3541.                 <div class="slider-overlay"></div>
  3542.                 
  3543.                 <!-- Header avec contrôles -->
  3544.                 <div class="slider-header">
  3545.                   <div class="slider-controls">
  3546.                     <button class="slider-btn favorite-btn" title="Retirer des favoris">
  3547.                       <i class="bi bi-heart-fill"></i>
  3548.                     </button>
  3549.                     <button class="slider-btn zoom-btn" title="Zoom">
  3550.                       <i class="bi bi-zoom-in"></i>
  3551.                     </button>
  3552.                     <button class="slider-btn close-btn" title="Fermer">
  3553.                       <i class="bi bi-x-lg"></i>
  3554.                     </button>
  3555.                   </div>
  3556.                 </div>
  3558.                 <!-- Navigation -->
  3559.                 <button class="slider-nav prev-btn" title="Précédent">
  3560.                   <i class="bi bi-arrow-left-circle-fill"></i>
  3561.                 </button>
  3562.                 <button class="slider-nav next-btn" title="Suivant">
  3563.                   <i class="bi bi-arrow-right-circle-fill"></i>
  3564.                 </button>
  3566.                 <!-- Container des slides -->
  3567.                 <div class="slider-container">
  3568.                   <div class="slider-track" id="sliderTrack">
  3569.                     ${this.favorites.map((fav, index) => `
  3570.                       <div class="slide" data-index="${index}">
  3571.                         <div class="slide-content">
  3572.                           <img src="${fav.url}" alt="${fav.description || 'Photo favorite'}" 
  3573.                                loading="${index <= 2 ? 'eager' : 'lazy'}"
  3574.                                draggable="false">
  3575.                         </div>
  3576.                         <div class="slide-info">
  3577.                           <h4>${fav.description || 'Photo favorite'}</h4>
  3578.                           <p>${fav.date || 'Date inconnue'}</p>
  3579.                         </div>
  3580.                       </div>
  3581.                     `).join('')}
  3582.                   </div>
  3583.                 </div>
  3585.                 <!-- Thumbnails -->
  3586.                 <div class="slider-thumbnails">
  3587.                   ${this.favorites.map((fav, index) => `
  3588.                     <div class="thumbnail ${index === this.currentIndex ? 'active' : ''}" 
  3589.                          data-index="${index}">
  3590.                       <img src="${fav.url}" alt="Thumbnail ${index + 1}">
  3591.                     </div>
  3592.                   `).join('')}
  3593.                 </div>
  3594.               </div>
  3595.             `;
  3597.             // Injecter dans le DOM
  3598.             document.body.insertAdjacentHTML('beforeend', sliderHTML);
  3599.           }
  3601.           showSlide(index) {
  3602.             if (index < 0 || index >= this.favorites.length) return;
  3604.             this.currentIndex = index;
  3605.             const track = document.getElementById('sliderTrack');
  3606.             const translateX = -index * 100;
  3607.             
  3608.             track.style.transform = `translateX(${translateX}%)`;
  3611.             // ⚡ OPTIMISÉ: Éviter forEach sur querySelectorAll (mémoire)
  3612.             const thumbnails = document.querySelectorAll('.thumbnail');
  3613.             for (let i = 0; i < thumbnails.length; i++) {
  3614.               const thumb = thumbnails[i];
  3615.               if (thumb?.classList) {
  3616.                 thumb.classList.toggle('active', i === index);
  3617.               }
  3618.             }
  3620.             // Mettre à jour le bouton favori
  3621.             const currentFav = this.favorites[index];
  3622.             const favoriteBtn = document.querySelector('.slider-controls .favorite-btn');
  3623.             if (favoriteBtn && currentFav) {
  3624.               favoriteBtn.setAttribute('data-id', currentFav.id);
  3625.             }
  3626.           }
  3628.           nextSlide() {
  3629.             const nextIndex = (this.currentIndex + 1) % this.favorites.length;
  3630.             this.showSlide(nextIndex);
  3631.           }
  3633.           prevSlide() {
  3634.             const prevIndex = (this.currentIndex - 1 + this.favorites.length) % this.favorites.length;
  3635.             this.showSlide(prevIndex);
  3636.           }
  3638.           close() {
  3639.             if (!this.isOpen) return;
  3641.             const slider = document.querySelector('.favorites-slider');
  3642.             if (slider && slider.classList) {
  3643.               slider.classList.remove('active');
  3644.               
  3645.               setTimeout(() => {
  3646.                 slider.remove();
  3647.                 this.isOpen = false;
  3648.               }, 300);
  3649.             }
  3650.           }
  3652.           attachEvents() {
  3653.             const slider = document.getElementById('favoritesSlider');
  3654.             
  3655.             // Bouton fermer
  3656.             slider.querySelector('.close-btn').addEventListener('click', () => this.close());
  3657.             
  3658.             // Navigation
  3659.             slider.querySelector('.prev-btn').addEventListener('click', () => this.prevSlide());
  3660.             slider.querySelector('.next-btn').addEventListener('click', () => this.nextSlide());
  3661.             
  3662.             // ⚡ OPTIMISÉ: Event delegation au lieu de listeners multiples
  3663.             const thumbContainer = slider.querySelector('.thumbnails-container') || slider;
  3664.             if (thumbContainer && !thumbContainer.hasAttribute('data-thumb-delegated')) {
  3665.               thumbContainer.addEventListener('click', (e) => {
  3666.                 const thumb = e.target.closest('.thumbnail');
  3667.                 if (thumb) {
  3668.                   const thumbnails = slider.querySelectorAll('.thumbnail');
  3669.                   const index = Array.from(thumbnails).indexOf(thumb);
  3670.                   if (index !== -1) this.showSlide(index);
  3671.                 }
  3672.               });
  3673.               thumbContainer.setAttribute('data-thumb-delegated', 'true');
  3674.             }
  3676.             // Bouton favori
  3677.             slider.querySelector('.favorite-btn').addEventListener('click', (e) => {
  3678.               const favoriteId = e.currentTarget.getAttribute('data-id');
  3679.               if (favoriteId) {
  3680.                 removeFavorite(favoriteId);
  3681.                 // Recharger le slider avec les favoris mis à jour
  3682.                 setTimeout(() => {
  3683.                   this.close();
  3684.                   if (getFavoriteItems().filter(item => item.type === 'image').length > 0) {
  3685.                     this.open(this.favorites[0]?.id);
  3686.                   }
  3687.                 }, 100);
  3688.               }
  3689.             });
  3691.             // Clavier
  3692.             document.addEventListener('keydown', this.handleKeyboard.bind(this));
  3693.             
  3694.             // Clic sur overlay pour fermer
  3695.             slider.querySelector('.slider-overlay').addEventListener('click', () => this.close());
  3697.             // Touch/swipe sur mobile
  3698.             const track = slider.querySelector('.slider-track');
  3699.             track.addEventListener('touchstart', this.handleTouchStart.bind(this), { passive: true });
  3700.             track.addEventListener('touchend', this.handleTouchEnd.bind(this), { passive: true });
  3702.             // Zoom sur clic simple (5 niveaux) + double-clic (legacy)
  3703.             slider.querySelectorAll('.slide img').forEach(img => {
  3704.               let zoomLevel = 1;
  3705.               let isDragging = false;
  3706.               let startX, startY, translateX = 0, translateY = 0;
  3707.               
  3708.               // Zoom sur clic simple (nouveau système 5 niveaux)
  3709.               img.addEventListener('click', (e) => {
  3710.                 e.preventDefault();
  3711.                 e.stopPropagation();
  3712.                 
  3713.                 // Cycle à travers 5 niveaux de zoom
  3714.                 switch(zoomLevel) {
  3715.                   case 1: zoomLevel = 1.5; break;  // 1x → 1.5x
  3716.                   case 1.5: zoomLevel = 2; break;  // 1.5x → 2x
  3717.                   case 2: zoomLevel = 3; break;    // 2x → 3x
  3718.                   case 3: zoomLevel = 4; break;    // 3x → 4x
  3719.                   case 4: zoomLevel = 5; break;    // 4x → 5x
  3720.                   case 5: 
  3721.                     zoomLevel = 1;                 // 5x → 1x (reset)
  3722.                     translateX = 0;
  3723.                     translateY = 0;
  3724.                     break;
  3725.                 }
  3727.                 console.log('FavoritesSlider - Zoom niveau:', zoomLevel);
  3728.                 img.style.transform = `scale(${zoomLevel}) translate(${translateX}px, ${translateY}px)`;
  3729.                 
  3730.                 // Curseur selon le niveau
  3731.                 if (zoomLevel === 1) {
  3732.                   img.style.cursor = 'zoom-in';
  3733.                   img.removeAttribute('data-zoomed');
  3734.                 } else if (zoomLevel === 5) {
  3735.                   img.style.cursor = 'zoom-out';
  3736.                   img.setAttribute('data-zoomed', zoomLevel);
  3737.                 } else {
  3738.                   img.style.cursor = 'zoom-in';
  3739.                   img.setAttribute('data-zoomed', zoomLevel);
  3740.                 }
  3741.               });
  3742.               
  3743.               // Drag pour déplacer l'image zoomée
  3744.               img.addEventListener('mousedown', (e) => {
  3745.                 if (zoomLevel > 1) {
  3746.                   isDragging = true;
  3747.                   startX = e.clientX - translateX;
  3748.                   startY = e.clientY - translateY;
  3749.                   img.style.cursor = 'grabbing';
  3750.                   e.preventDefault();
  3751.                   e.stopPropagation();
  3752.                 }
  3753.               });
  3755.               const handleMouseMove = (e) => {
  3756.                 if (isDragging && zoomLevel > 1) {
  3757.                   translateX = e.clientX - startX;
  3758.                   translateY = e.clientY - startY;
  3759.                   img.style.transform = `scale(${zoomLevel}) translate(${translateX}px, ${translateY}px)`;
  3760.                 }
  3761.               };
  3763.               const handleMouseUp = () => {
  3764.                 if (isDragging) {
  3765.                   isDragging = false;
  3766.                   if (zoomLevel === 1) {
  3767.                     img.style.cursor = 'zoom-in';
  3768.                   } else if (zoomLevel === 5) {
  3769.                     img.style.cursor = 'zoom-out';
  3770.                   } else {
  3771.                     img.style.cursor = 'zoom-in';
  3772.                   }
  3773.                 }
  3774.               };
  3776.               document.addEventListener('mousemove', handleMouseMove);
  3777.               document.addEventListener('mouseup', handleMouseUp);
  3779.               // Support tactile pour mobile
  3780.               img.addEventListener('touchstart', (e) => {
  3781.                 if (zoomLevel > 1 && e.touches.length === 1) {
  3782.                   isDragging = true;
  3783.                   const touch = e.touches[0];
  3784.                   startX = touch.clientX - translateX;
  3785.                   startY = touch.clientY - translateY;
  3786.                   e.preventDefault();
  3787.                 }
  3788.               });
  3790.               img.addEventListener('touchmove', (e) => {
  3791.                 if (isDragging && zoomLevel > 1 && e.touches.length === 1) {
  3792.                   const touch = e.touches[0];
  3793.                   translateX = touch.clientX - startX;
  3794.                   translateY = touch.clientY - startY;
  3795.                   img.style.transform = `scale(${zoomLevel}) translate(${translateX}px, ${translateY}px)`;
  3796.                   e.preventDefault();
  3797.                 }
  3798.               });
  3800.               img.addEventListener('touchend', () => {
  3801.                 isDragging = false;
  3802.               });
  3804.               // Initialiser le curseur
  3805.               img.style.cursor = 'zoom-in';
  3806.               
  3807.               // Garder aussi le double-clic pour compatibilité (legacy)
  3808.               img.addEventListener('dblclick', this.handleZoom.bind(this));
  3809.             });
  3810.           }
  3812.           handleKeyboard(e) {
  3813.             if (!this.isOpen) return;
  3814.             
  3815.             switch(e.key) {
  3816.               case 'Escape':
  3817.                 this.close();
  3818.                 break;
  3819.               case 'ArrowLeft':
  3820.                 e.preventDefault();
  3821.                 this.prevSlide();
  3822.                 break;
  3823.               case 'ArrowRight':
  3824.                 e.preventDefault();
  3825.                 this.nextSlide();
  3826.                 break;
  3827.             }
  3828.           }
  3830.           handleTouchStart(e) {
  3831.             this.touchStartX = e.changedTouches[0].screenX;
  3832.           }
  3834.           handleTouchEnd(e) {
  3835.             this.touchEndX = e.changedTouches[0].screenX;
  3836.             this.handleSwipe();
  3837.           }
  3839.           handleSwipe() {
  3840.             const swipeThreshold = 50;
  3841.             const diff = this.touchStartX - this.touchEndX;
  3843.             if (Math.abs(diff) > swipeThreshold) {
  3844.               if (diff > 0) {
  3845.                 this.nextSlide(); // Swipe left -> next
  3846.               } else {
  3847.                 this.prevSlide(); // Swipe right -> prev
  3848.               }
  3849.             }
  3850.           }
  3852.           handleZoom(e) {
  3853.             const img = e.target;
  3854.             
  3855.             // Vérifier que l'élément et ses propriétés existent
  3856.             if (!img || !img.classList) {
  3857.               console.warn('Élément image invalide pour le zoom');
  3858.               return;
  3859.             }
  3860.             
  3861.             // Gérer les différents niveaux de zoom
  3862.             if (img.classList.contains('zoom-4x')) {
  3863.               // Retour à la taille normale
  3864.               img.classList.remove('zoom-4x', 'zoom-3x', 'zoom-2x', 'zoomed');
  3865.               img.style.cursor = 'pointer';
  3866.               img.style.transform = 'scale(1)'; // Réinitialiser la position
  3867.             } else if (img.classList.contains('zoom-3x')) {
  3868.               // Passer au zoom 4x
  3869.               img.classList.remove('zoom-3x');
  3870.               img.classList.add('zoom-4x');
  3871.               img.style.cursor = 'zoom-out';
  3872.               img.style.transform = 'scale(4)'; // Réinitialiser la position
  3873.             } else if (img.classList.contains('zoom-2x')) {
  3874.               // Passer au zoom 3x
  3875.               img.classList.remove('zoom-2x');
  3876.               img.classList.add('zoom-3x');
  3877.               img.style.cursor = 'zoom-in';
  3878.               img.style.transform = 'scale(3)'; // Réinitialiser la position
  3879.             } else if (img.classList.contains('zoomed')) {
  3880.               // Passer au zoom 2x
  3881.               img.classList.remove('zoomed');
  3882.               img.classList.add('zoom-2x');
  3883.               img.style.cursor = 'zoom-in';
  3884.               img.style.transform = 'scale(2)'; // Réinitialiser la position
  3885.             } else {
  3886.               // Premier zoom (1.5x)
  3887.               img.classList.add('zoomed');
  3888.               img.style.cursor = 'zoom-in';
  3889.               img.style.transform = 'scale(1.5)'; // Réinitialiser la position
  3890.             }
  3891.           }
  3892.         }
  3894.         // Slider universel pour toutes les images (favoris + galerie normale)
  3895.         class UniversalImageSlider {
  3896.           constructor() {
  3897.             this.currentIndex = 0;
  3898.             this.images = [];
  3899.             this.isOpen = false;
  3900.             this.touchStartX = 0;
  3901.             this.touchEndX = 0;
  3902.           }
  3904.           // Ouvrir avec une image spécifique depuis les favoris
  3905.           openFromFavorites(favoriteId) {
  3906.             console.log('Ouverture du slider depuis favoris:', favoriteId);
  3907.             
  3908.             // Récupérer tous les favoris images
  3909.             this.images = getFavoriteItems().filter(item => item.type === 'image');
  3910.             
  3911.             if (this.images.length === 0) {
  3912.               console.error('Aucun favori image trouvé');
  3913.               return;
  3914.             }
  3916.             // Trouver l'index de l'image courante
  3917.             this.currentIndex = this.images.findIndex(img => img.id === favoriteId);
  3918.             if (this.currentIndex === -1) this.currentIndex = 0;
  3920.             this.openSlider();
  3921.           }
  3923.           // Ouvrir avec une image spécifique depuis la galerie normale
  3924.           openFromGallery(imageId, dayContainer) {
  3925.             console.log('Ouverture du slider depuis galerie:', imageId, dayContainer);
  3926.             
  3927.             // Récupérer toutes les images du jour courant
  3928.             const dayImages = [];
  3929.             
  3930.             // Chercher dans le container du jour (peut être .dynamic-card ou autre)
  3931.             let photoItems;
  3932.             if (dayContainer) {
  3933.               photoItems = dayContainer.querySelectorAll('.photo-item');
  3934.             } else {
  3935.               // Fallback: chercher dans tout le document
  3936.               photoItems = document.querySelectorAll('.photo-item');
  3937.             }
  3938.             
  3939.             console.log('Photo items trouvés:', photoItems.length);
  3940.             
  3941.             photoItems.forEach(item => {
  3942.               const img = item.querySelector('img');
  3943.               const heartIcon = item.querySelector('.heart-icon');
  3944.               
  3945.               console.log('Processing item:', {
  3946.                 img: !!img,
  3947.                 heartIcon: !!heartIcon,
  3948.                 imgSrc: img ? img.src : null,
  3949.                 heartIconId: heartIcon ? heartIcon.getAttribute('data-id') : null
  3950.               });
  3951.               
  3952.               if (img && heartIcon) {
  3953.                 dayImages.push({
  3954.                   id: heartIcon.getAttribute('data-id'),
  3955.                   url: heartIcon.getAttribute('data-path') || img.src,
  3956.                   description: heartIcon.getAttribute('data-description') || img.alt || 'Photo',
  3957.                   date: '', // Pas de date spécifique pour les images de galerie
  3958.                   type: 'image'
  3959.                 });
  3960.               }
  3961.             });
  3963.             console.log('Images trouvées:', dayImages);
  3964.             this.images = dayImages;
  3965.             
  3966.             if (this.images.length === 0) {
  3967.               console.error('Aucune image trouvée dans ce jour');
  3968.               // Essayer de créer au moins l'image courante
  3969.               const currentHeartIcon = document.querySelector(`[data-id="${imageId}"]`);
  3970.               if (currentHeartIcon) {
  3971.                 const currentImg = currentHeartIcon.closest('.photo-item').querySelector('img');
  3972.                 if (currentImg) {
  3973.                   this.images = [{
  3974.                     id: imageId,
  3975.                     url: currentHeartIcon.getAttribute('data-path') || currentImg.src,
  3976.                     description: currentHeartIcon.getAttribute('data-description') || currentImg.alt || 'Photo',
  3977.                     date: '',
  3978.                     type: 'image'
  3979.                   }];
  3980.                   console.log('Image de fallback créée:', this.images);
  3981.                 }
  3982.               }
  3983.               
  3984.               if (this.images.length === 0) {
  3985.                 return;
  3986.               }
  3987.             }
  3989.             // Trouver l'index de l'image courante
  3990.             this.currentIndex = this.images.findIndex(img => img.id === imageId);
  3991.             if (this.currentIndex === -1) this.currentIndex = 0;
  3993.             console.log('Index trouvé:', this.currentIndex);
  3994.             this.openSlider();
  3995.           }
  3997.           openSlider() {
  3998.             console.log('=== openSlider appelée ===');
  3999.             console.log('Index courant:', this.currentIndex, 'Total:', this.images.length);
  4000.             console.log('Images à afficher:', this.images);
  4002.             // Supprimer tout slider existant
  4003.             const existingSlider = document.querySelector('.universal-slider');
  4004.             if (existingSlider) {
  4005.               console.log('Suppression du slider existant');
  4006.               existingSlider.remove();
  4007.             }
  4009.             this.createSlider();
  4010.             this.showSlide(this.currentIndex);
  4011.             this.attachEvents();
  4012.             this.isOpen = true;
  4014.               // Animation d'ouverture immédiate et garantie avec diagnostic
  4015.               setTimeout(() => {
  4016.                 if (window.diagnoseSliderDisplay) {
  4017.                   window.diagnoseSliderDisplay('#universalSlider');
  4018.                 }
  4019.               }, 50);
  4020.           }
  4022.           createSlider() {
  4023.             // ⚡ OPTIMISATION: Créer seulement si nécessaire
  4024.             if (document.querySelector('#universalSlider')) {
  4025.               return; // Déjà créé
  4026.             }
  4027.             
  4028.             console.log('Création slider pour', this.images.length, 'images');
  4029.             
  4030.             // HTML optimisé et minimal
  4031.             const sliderHTML = `
  4032.               <div class="universal-slider" id="universalSlider" style="
  4033.                 position: fixed !important; 
  4034.                 top: 0 !important; 
  4035.                 left: 0 !important; 
  4036.                 width: 100% !important; 
  4037.                 height: 100% !important; 
  4038.                 background: rgba(0,0,0,0.95) !important; 
  4039.                 z-index: 9999 !important; 
  4040.                 display: flex !important; 
  4041.                 align-items: center !important; 
  4042.                 justify-content: center !important; 
  4043.                 opacity: 1 !important; 
  4044.                 visibility: visible !important;
  4045.               ">
  4046.                 <div class="slider-overlay" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; cursor: pointer;"></div>
  4047.                 
  4048.                 <!-- Header avec contrôles -->
  4049.                 <div class="slider-header" style="
  4050.                   position: absolute; 
  4051.                   top: 20px; 
  4052.                   right: 20px; 
  4053.                   display: flex; 
  4054.                   align-items: center; 
  4055.                   gap: 15px; 
  4056.                   z-index: 10001;
  4057.                 ">
  4058.                   <button class="slider-btn close-btn" title="Fermer" style="
  4059.                     background: rgba(255,255,255,0.2); 
  4060.                     border: none; 
  4061.                     color: white; 
  4062.                     width: 40px; 
  4063.                     height: 40px; 
  4064.                     border-radius: 50%; 
  4065.                     cursor: pointer; 
  4066.                     display: flex; 
  4067.                     align-items: center; 
  4068.                     justify-content: center;
  4069.                     transition: background 0.2s ease;
  4070.                   ">
  4071.                     <i class="bi bi-x-lg"></i>
  4072.                   </button>
  4073.                 </div>
  4075.                 <!-- Navigation -->
  4076.                 <button class="slider-nav prev-btn" title="Précédent" style="
  4077.                   position: absolute; 
  4078.                   left: 20px; 
  4079.                   top: 50%; 
  4080.                   transform: translateY(-50%); 
  4081.                   background: rgba(255,255,255,0.2); 
  4082.                   border: none; 
  4083.                   color: white; 
  4084.                   width: 50px; 
  4085.                   height: 50px; 
  4086.                   border-radius: 50%; 
  4087.                   cursor: pointer; 
  4088.                   display: ${this.images.length > 1 ? 'flex' : 'none'}; 
  4089.                   align-items: center; 
  4090.                   justify-content: center; 
  4091.                   z-index: 10001;
  4092.                   transition: background 0.2s ease;
  4093.                 ">
  4094.                   <i class="bi bi-arrow-left-circle-fill" style="font-size: 20px;"></i>
  4095.                 </button>
  4096.                 <button class="slider-nav next-btn" title="Suivant" style="
  4097.                   position: absolute; 
  4098.                   right: 20px; 
  4099.                   top: 50%; 
  4100.                   transform: translateY(-50%); 
  4101.                   background: rgba(255,255,255,0.2); 
  4102.                   border: none; 
  4103.                   color: white; 
  4104.                   width: 50px; 
  4105.                   height: 50px; 
  4106.                   border-radius: 50%; 
  4107.                   cursor: pointer; 
  4108.                   display: ${this.images.length > 1 ? 'flex' : 'none'}; 
  4109.                   align-items: center; 
  4110.                   justify-content: center; 
  4111.                   z-index: 10001;
  4112.                   transition: background 0.2s ease;
  4113.                 ">
  4114.                   <i class="bi bi-arrow-right-circle-fill" style="font-size: 20px;"></i>
  4115.                 </button>
  4117.                 <!-- Container des slides -->
  4118.                 <div class="slider-container" style="
  4119.                   position: relative; 
  4120.                   width: 90%; 
  4121.                   height: 90%; 
  4122.                   display: flex; 
  4123.                   align-items: center; 
  4124.                   justify-content: center; 
  4125.                   z-index: 10000;
  4126.                 ">
  4127.                   <div class="slider-track" id="universalSliderTrack" style="
  4128.                     position: relative; 
  4129.                     width: 100%; 
  4130.                     height: 100%; 
  4131.                     display: flex; 
  4132.                     align-items: center; 
  4133.                     justify-content: center;
  4134.                     overflow: hidden;
  4135.                   ">
  4136.                     ${this.images.map((img, index) => `
  4137.                       <div class="slide" data-index="${index}" style="
  4138.                         position: absolute; 
  4139.                         width: 100%; 
  4140.                         height: 100%; 
  4141.                         display: ${index === 0 ? 'flex' : 'none'}; 
  4142.                         align-items: center; 
  4143.                         justify-content: center; 
  4144.                         flex-direction: column;
  4145.                       ">
  4146.                         <div class="slide-content" style="
  4147.                           position: relative; 
  4148.                           max-width: 100%; 
  4149.                           max-height: 90%; 
  4150.                           display: flex; 
  4151.                           align-items: center; 
  4152.                           justify-content: center;
  4153.                         ">
  4154.                           <img src="${img.url}" alt="${img.description || 'Photo'}" 
  4155.                                loading="${index <= 2 ? 'eager' : 'lazy'}"
  4156.                                draggable="false"
  4157.                                style="
  4158.                                  max-width: 100%; 
  4159.                                  max-height: 100%; 
  4160.                                  object-fit: contain; 
  4161.                                  cursor: zoom-in;
  4162.                                  transition: transform 0.3s ease;
  4163.                                  user-select: none;
  4164.                                ">
  4165.                         </div>
  4166.                         ${img.description ? `
  4167.                         <div class="slide-info" style="
  4168.                           position: absolute; 
  4169.                           bottom: 60px; 
  4170.                           left: 50%; 
  4171.                           transform: translateX(-50%); 
  4172.                           text-align: center; 
  4173.                           color: white; 
  4174.                           background: rgba(0,0,0,0.6); 
  4175.                           padding: 8px 16px; 
  4176.                           border-radius: 20px; 
  4177.                           max-width: 80%;
  4178.                           font-size: 14px;
  4179.                         ">
  4180.                           ${img.description}
  4181.                         </div>
  4182.                         ` : ''}
  4183.                       </div>
  4184.                     `).join('')}
  4185.                   </div>
  4186.                 </div>
  4188.                 <!-- Galerie de thumbnails révolutionnaire -->
  4189.                 <div class="cinema-gallery" style="
  4190.                   position: absolute; 
  4191.                   bottom: 0; 
  4192.                   left: 0; 
  4193.                   right: 0;
  4194.                   height: 180px;
  4195.                   background: linear-gradient(0deg, rgba(0,0,0,0.95) 0%, rgba(0,0,0,0.7) 50%, transparent 100%);
  4196.                   z-index: 10001;
  4197.                   display: flex;
  4198.                   flex-direction: column;
  4199.                   justify-content: flex-end;
  4200.                   padding: 0 20px 20px;
  4201.                 ">
  4202.                   
  4204.                   <!-- Info header avec compteur élégant -->
  4205.                   <div class="gallery-header" style="
  4206.                     display: flex;
  4207.                     justify-content: space-between;
  4208.                     align-items: center;
  4209.                     margin-bottom: 15px;
  4210.                   ">
  4211.                     <div class="photo-counter" style="
  4212.                       color: white;
  4213.                       font-size: 16px;
  4214.                       font-weight: 600;
  4215.                       display: flex;
  4216.                       align-items: center;
  4217.                       gap: 8px;
  4218.                     ">
  4219.                       <div style="
  4220.                         width: 8px;
  4221.                         height: 8px;
  4222.                         background: #10b981;
  4223.                         border-radius: 50%;
  4224.                         animation: pulse 2s infinite;
  4225.                       "></div>
  4226.                       <span>${(this.currentIndex || 0) + 1}</span>
  4227.                       <span style="opacity: 0.6;">sur</span>
  4228.                       <span>${this.images.length}</span>
  4229.                     </div>
  4230.                     <div class="gallery-controls" style="
  4231.                       display: flex;
  4232.                       gap: 12px;
  4233.                       align-items: center;
  4234.                     ">
  4235.                       <div style="color: rgba(255,255,255,0.7); font-size: 12px;">
  4236.                         Clic = Zoom 5x • Drag = Déplacer
  4237.                       </div>
  4238.                     </div>
  4239.                   </div>
  4240.                   
  4241.                   <!-- Carrousel de thumbnails cinématographique -->
  4242.                   <div class="cinema-carousel" style="
  4243.                     position: relative;
  4244.                     height: 80px;
  4245.                     overflow: hidden;
  4246.                   ">
  4247.                     <!-- Container scrollable -->
  4248.                     <div class="carousel-track" id="carouselTrack" style="
  4249.                       display: flex;
  4250.                       gap: 12px;
  4251.                       height: 100%;
  4252.                       overflow-x: auto;
  4253.                       overflow-y: hidden;
  4254.                       scroll-behavior: smooth;
  4255.                       scrollbar-width: none;
  4256.                       -ms-overflow-style: none;
  4257.                       padding: 0 50px;
  4258.                     ">
  4259.                       ${this.images.map((img, index) => `
  4260.                         <div class="cinema-thumb ${index === 0 ? 'active' : ''}" 
  4261.                              data-index="${index}" 
  4262.                              style="
  4263.                                flex: 0 0 auto;
  4264.                                width: ${index === 0 ? '100px' : '70px'};
  4265.                                height: 70px;
  4266.                                border-radius: 8px;
  4267.                                overflow: hidden;
  4268.                                cursor: pointer;
  4269.                                position: relative;
  4270.                                transition: transform 0.2s ease, opacity 0.2s ease;
  4271.                                transform: ${index === 0 ? 'translateY(-4px)' : 'translateY(0)'};
  4272.                                opacity: ${index === 0 ? '1' : '0.7'};
  4273.                                border: ${index === 0 ? '2px solid #10b981' : '1px solid rgba(255,255,255,0.3)'};
  4274.                              "
  4275.                              onmouseenter="
  4276.                                if (${index} !== (window.universalSlider?.currentIndex || 0)) {
  4277.                                  this.style.opacity = '0.9';
  4278.                                }
  4279.                              "
  4280.                              onmouseleave="
  4281.                                if (${index} !== (window.universalSlider?.currentIndex || 0)) {
  4282.                                  this.style.opacity = '0.7';
  4283.                                }
  4284.                              ">
  4285.                           
  4286.                           <!-- Image principale -->
  4287.                           <img src="${img.url}" 
  4288.                                alt="${img.description || 'Photo'}" 
  4289.                                loading="lazy" 
  4290.                                decoding="async"
  4291.                                style="
  4292.                                  width: 100%; 
  4293.                                  height: 100%; 
  4294.                                  object-fit: cover;
  4295.                                ">
  4296.                           
  4297.                           <!-- Numéro simplifié -->
  4298.                           <div class="thumb-number" style="
  4299.                             position: absolute;
  4300.                             top: 4px;
  4301.                             right: 4px;
  4302.                             background: ${index === 0 ? '#10b981' : 'rgba(0,0,0,0.8)'};
  4303.                             color: white;
  4304.                             font-size: 10px;
  4305.                             font-weight: 500;
  4306.                             padding: 2px 5px;
  4307.                             border-radius: 4px;
  4308.                             min-width: 16px;
  4309.                             text-align: center;
  4310.                           ">
  4311.                             ${index + 1}
  4312.                           </div>
  4313.                           
  4314.                           <!-- Indicateur actif simplifié -->
  4315.                           ${index === 0 ? `
  4316.                           <div class="active-indicator" style="
  4317.                             position: absolute;
  4318.                             bottom: -1px;
  4319.                             left: 50%;
  4320.                             transform: translateX(-50%);
  4321.                             width: 16px;
  4322.                             height: 2px;
  4323.                             background: #10b981;
  4324.                             border-radius: 1px;
  4325.                           "></div>
  4326.                           ` : ''}
  4327.                           
  4328.                           <!-- Preview au hover pour les non-actifs -->
  4329.                           ${index !== 0 ? `
  4330.                           <div class="hover-preview" style="
  4331.                             position: absolute;
  4332.                             bottom: -40px;
  4333.                             left: 50%;
  4334.                             transform: translateX(-50%);
  4335.                             background: rgba(0,0,0,0.9);
  4336.                             color: white;
  4337.                             font-size: 11px;
  4338.                             padding: 4px 8px;
  4339.                             border-radius: 6px;
  4340.                             opacity: 0;
  4341.                             pointer-events: none;
  4342.                             transition: all 0.3s ease;
  4343.                             white-space: nowrap;
  4344.                             z-index: 1000;
  4345.                           ">
  4346.                             Photo ${index + 1}
  4347.                           </div>
  4348.                           ` : ''}
  4349.                         </div>
  4350.                       `).join('')}
  4351.                     </div>
  4352.                     
  4353.                     <!-- Gradients de fade sur les côtés -->
  4354.                     <div style="
  4355.                       position: absolute;
  4356.                       left: 0;
  4357.                       top: 0;
  4358.                       bottom: 0;
  4359.                       width: 50px;
  4360.                       background: linear-gradient(90deg, rgba(0,0,0,0.8), transparent);
  4361.                       pointer-events: none;
  4362.                       z-index: 1;
  4363.                     "></div>
  4364.                     <div style="
  4365.                       position: absolute;
  4366.                       right: 0;
  4367.                       top: 0;
  4368.                       bottom: 0;
  4369.                       width: 50px;
  4370.                       background: linear-gradient(-90deg, rgba(0,0,0,0.8), transparent);
  4371.                       pointer-events: none;
  4372.                       z-index: 1;
  4373.                     "></div>
  4374.                   </div>
  4375.                 </div>
  4377.                 <!-- Animations CSS Optimisées -->
  4378.                 <style>
  4379.                   /* Optimisation: animations réduites et ciblées */
  4380.                   @keyframes pulse {
  4381.                     0%, 100% { opacity: 1; }
  4382.                     50% { opacity: 0.7; }
  4383.                   }
  4384.                   
  4385.                   /* Suppression du glow coûteux - remplacé par border simple */
  4386.                   .cinema-thumb.active .active-indicator {
  4387.                     background: #10b981;
  4388.                     animation: none; /* Suppression de l'animation glow */
  4389.                   }
  4390.                   
  4391.                   /* Hover optimisé - moins d'effets */
  4392.                   .cinema-thumb:hover .hover-preview {
  4393.                     opacity: 1 !important;
  4394.                     bottom: -35px !important;
  4395.                   }
  4396.                   
  4397.                   /* Masquer scrollbar */
  4398.                   .carousel-track::-webkit-scrollbar {
  4399.                     display: none;
  4400.                   }
  4401.                   
  4402.                   /* Optimisation: will-change pour les éléments animés */
  4403.                   .cinema-thumb {
  4404.                     will-change: transform, filter;
  4405.                   }
  4406.                   
  4407.                   .progress-bar {
  4408.                     will-change: width;
  4409.                   }
  4410.                 </style>
  4411.               </div>
  4412.             `;
  4414.             // Injecter dans le DOM
  4415.             console.log('Ajout du slider au DOM');
  4416.             document.body.insertAdjacentHTML('beforeend', sliderHTML);
  4417.             
  4418.             // Vérifier que le slider a été ajouté
  4419.             const addedSlider = document.querySelector('#universalSlider');
  4420.             console.log('Slider ajouté:', !!addedSlider);
  4421.             if (addedSlider) {
  4422.               console.log('Slider trouvé dans le DOM');
  4423.               console.log('Styles du slider:', {
  4424.                 display: addedSlider.style.display,
  4425.                 opacity: addedSlider.style.opacity,
  4426.                 visibility: addedSlider.style.visibility,
  4427.                 zIndex: addedSlider.style.zIndex,
  4428.                 position: addedSlider.style.position
  4429.               });
  4430.               console.log('Slider dans viewport:', addedSlider.getBoundingClientRect());
  4431.             } else {
  4432.               console.error('Erreur: slider non trouvé après ajout');
  4433.             }
  4434.           }
  4436.           showSlide(index) {
  4437.             console.log('=== showSlide appelée ===', 'index:', index, 'total:', this.images.length);
  4438.             if (index < 0 || index >= this.images.length) {
  4439.               console.log('Index invalide, arrêt');
  4440.               return;
  4441.             }
  4443.             this.currentIndex = index;
  4445.             // Masquer toutes les slides et afficher seulement la courante
  4446.             const slides = document.querySelectorAll('#universalSlider .slide');
  4447.             console.log('Slides trouvées:', slides.length);
  4448.             slides.forEach((slide, i) => {
  4449.               slide.style.display = i === index ? 'flex' : 'none';
  4450.               console.log(`Slide ${i}:`, i === index ? 'visible' : 'cachée');
  4451.             });
  4453.             // Mettre à jour le compteur
  4454.             const currentSlideSpan = document.querySelector('#universalSlider .current-slide');
  4455.             if (currentSlideSpan) {
  4456.               currentSlideSpan.textContent = index + 1;
  4457.               console.log('Compteur mis à jour:', index + 1);
  4458.             }
  4460.             // Mettre à jour les boutons de navigation
  4461.             const prevBtn = document.querySelector('#universalSlider .prev-btn');
  4462.             const nextBtn = document.querySelector('#universalSlider .next-btn');
  4463.             
  4464.             if (prevBtn) {
  4465.               prevBtn.style.opacity = index > 0 ? '1' : '0.5';
  4466.             }
  4467.             if (nextBtn) {
  4468.               nextBtn.style.opacity = index < this.images.length - 1 ? '1' : '0.5';
  4469.             }
  4471.             // Mettre à jour la galerie cinématographique
  4472.             this.updateCinemaGallery(index);
  4474.             // Mettre à jour le bouton favori
  4475.             this.updateFavoriteButton();
  4476.           }
  4478.           updateCinemaGallery(activeIndex) {
  4479.             // Mettre à jour la progress bar (optimisé)
  4480.             const progressBar = document.querySelector('.progress-bar');
  4481.             if (progressBar) {
  4482.               progressBar.style.width = `${(activeIndex + 1) / this.images.length * 100}%`;
  4483.             }
  4485.             // Mettre à jour le compteur (optimisé)
  4486.             const counter = document.querySelector('.photo-counter span');
  4487.             if (counter) {
  4488.               counter.textContent = activeIndex + 1;
  4489.             }
  4491.             // Mettre à jour les thumbnails - optimisé avec moins de calculs
  4492.             const cinemaThumbs = document.querySelectorAll('.cinema-thumb');
  4493.             cinemaThumbs.forEach((thumb, i) => {
  4494.               const isActive = i === activeIndex;
  4495.               
  4496.               // Optimisation: changements minimaux
  4497.               if (isActive) {
  4498.                 thumb.style.width = '100px';
  4499.                 thumb.style.transform = 'translateY(-4px)';
  4500.                 thumb.style.opacity = '1';
  4501.                 thumb.style.borderColor = '#10b981';
  4502.                 thumb.style.borderWidth = '2px';
  4503.                 
  4504.                 // Numéro actif - simplifié
  4505.                 const number = thumb.querySelector('.thumb-number');
  4506.                 if (number) {
  4507.                   number.style.background = '#10b981';
  4508.                 }
  4509.               } else {
  4510.                 thumb.style.width = '70px';
  4511.                 thumb.style.transform = 'translateY(0)';
  4512.                 thumb.style.opacity = '0.7';
  4513.                 thumb.style.borderColor = 'rgba(255,255,255,0.3)';
  4514.                 thumb.style.borderWidth = '1px';
  4515.                 
  4516.                 // Numéro inactif - simplifié
  4517.                 const number = thumb.querySelector('.thumb-number');
  4518.                 if (number) {
  4519.                   number.style.background = 'rgba(0,0,0,0.8)';
  4520.                 }
  4521.               }
  4522.             });
  4524.             // Auto-scroll optimisé avec throttling
  4525.             if (!this.scrollTimeout) {
  4526.               this.scrollTimeout = setTimeout(() => {
  4527.                 const track = document.getElementById('carouselTrack');
  4528.                 const activeThumb = document.querySelector(`.cinema-thumb[data-index="${activeIndex}"]`);
  4529.                 if (track && activeThumb) {
  4530.                   const scrollLeft = activeThumb.offsetLeft - (track.clientWidth / 2) + (activeThumb.clientWidth / 2);
  4531.                   track.scrollTo({
  4532.                     left: scrollLeft,
  4533.                     behavior: 'smooth'
  4534.                   });
  4535.                 }
  4536.                 this.scrollTimeout = null;
  4537.               }, 50); // Throttle à 50ms
  4538.             }
  4539.           }
  4541.           updateFavoriteButton() {
  4542.             const currentImage = this.images[this.currentIndex];
  4543.             const favoriteBtn = document.querySelector('.slider-controls .favorite-btn');
  4544.             
  4545.             if (favoriteBtn && currentImage) {
  4546.               favoriteBtn.setAttribute('data-id', currentImage.id);
  4547.               
  4548.               // Vérifier si l'image est déjà en favoris
  4549.               const heartIcon = document.querySelector(`[data-id="${currentImage.id}"]`);
  4550.               const isFavorite = heartIcon && heartIcon.querySelector('i.bi-heart-fill');
  4551.               
  4552.               const icon = favoriteBtn.querySelector('i');
  4553.               if (isFavorite) {
  4554.                 icon.className = 'bi bi-heart-fill';
  4555.                 favoriteBtn.style.color = '#e91e63';
  4556.               } else {
  4557.                 icon.className = 'bi bi-heart';
  4558.                 favoriteBtn.style.color = 'white';
  4559.               }
  4560.             }
  4561.           }
  4563.           nextSlide() {
  4564.             const nextIndex = (this.currentIndex + 1) % this.images.length;
  4565.             this.showSlide(nextIndex);
  4566.           }
  4568.           prevSlide() {
  4569.             const prevIndex = (this.currentIndex - 1 + this.images.length) % this.images.length;
  4570.             this.showSlide(prevIndex);
  4571.           }
  4573.           close() {
  4574.             if (!this.isOpen) return;
  4576.             const slider = document.querySelector('.universal-slider');
  4577.             if (slider) {
  4578.               slider.classList.remove('active');
  4579.               
  4580.               setTimeout(() => {
  4581.                 slider.remove();
  4582.                 this.isOpen = false;
  4583.               }, 300);
  4584.             }
  4585.           }
  4587.           attachEvents() {
  4588.             console.log('=== attachEvents appelée ===');
  4589.             const slider = document.getElementById('universalSlider');
  4590.             if (!slider) {
  4591.               console.error('Slider non trouvé pour attachEvents');
  4592.               return;
  4593.             }
  4594.             console.log('Slider trouvé pour attachEvents');
  4595.             
  4596.             // Bouton fermer
  4597.             const closeBtn = slider.querySelector('.close-btn');
  4598.             if (closeBtn) {
  4599.               console.log('Bouton fermer trouvé');
  4600.               closeBtn.addEventListener('click', () => {
  4601.                 console.log('Clic fermer');
  4602.                 this.close();
  4603.               });
  4604.             }
  4605.             
  4606.             // Navigation
  4607.             const prevBtn = slider.querySelector('.prev-btn');
  4608.             const nextBtn = slider.querySelector('.next-btn');
  4609.             if (prevBtn) {
  4610.               console.log('Bouton précédent trouvé');
  4611.               prevBtn.addEventListener('click', () => {
  4612.                 console.log('Clic précédent');
  4613.                 this.prevSlide();
  4614.               });
  4615.             }
  4616.             if (nextBtn) {
  4617.               console.log('Bouton suivant trouvé');
  4618.               nextBtn.addEventListener('click', () => {
  4619.                 console.log('Clic suivant');
  4620.                 this.nextSlide();
  4621.               });
  4622.             }
  4624.             // Navigation cinématographique des thumbnails
  4625.             const cinemaThumbs = slider.querySelectorAll('.cinema-thumb');
  4626.             cinemaThumbs.forEach((thumb, index) => {
  4627.               thumb.addEventListener('click', () => {
  4628.                 console.log('Clic cinema thumbnail:', index);
  4629.                 this.showSlide(index);
  4630.                 this.updateCinemaGallery(index);
  4631.               });
  4632.             });
  4633.             console.log('Cinema thumbnails cliquables:', cinemaThumbs.length);
  4635.             // Clic sur overlay pour fermer
  4636.             const overlay = slider.querySelector('.slider-overlay');
  4637.             if (overlay) {
  4638.               overlay.addEventListener('click', () => {
  4639.                 console.log('Clic overlay');
  4640.                 this.close();
  4641.               });
  4642.             }
  4644.             // Clavier
  4645.             this.keyboardHandler = this.handleKeyboard.bind(this);
  4646.             document.addEventListener('keydown', this.keyboardHandler);
  4647.             console.log('Événements clavier attachés');
  4649.             // Zoom sur les images
  4650.             this.attachZoomEvents(slider);
  4651.             console.log('Événements zoom attachés');
  4653.             console.log('Événements attachés avec succès');
  4654.           }
  4656.           close() {
  4657.             console.log('=== close appelée ===');
  4658.             const slider = document.querySelector('.universal-slider');
  4659.             if (slider) {
  4660.               console.log('Fermeture du slider');
  4661.               // Animation de fermeture
  4662.               slider.style.opacity = '0';
  4663.               
  4664.               setTimeout(() => {
  4665.                 slider.remove();
  4666.                 console.log('Slider supprimé du DOM');
  4667.                 
  4668.                 // Nettoyer les événements
  4669.                 if (this.keyboardHandler) {
  4670.                   document.removeEventListener('keydown', this.keyboardHandler);
  4671.                   this.keyboardHandler = null;
  4672.                 }
  4673.                 
  4674.                 this.isOpen = false;
  4675.               }, 300);
  4676.             }
  4677.           }
  4679.           nextSlide() {
  4680.             if (this.currentIndex < this.images.length - 1) {
  4681.               this.showSlide(this.currentIndex + 1);
  4682.             }
  4683.           }
  4685.           prevSlide() {
  4686.             if (this.currentIndex > 0) {
  4687.               this.showSlide(this.currentIndex - 1);
  4688.             }
  4689.           }
  4691.           handleKeyboard(e) {
  4692.             if (!this.isOpen) return;
  4693.             
  4694.             switch (e.key) {
  4695.               case 'Escape':
  4696.                 this.close();
  4697.                 break;
  4698.               case 'ArrowLeft':
  4699.                 this.prevSlide();
  4700.                 break;
  4701.               case 'ArrowRight':
  4702.                 this.nextSlide();
  4703.                 break;
  4704.             }
  4705.           }
  4707.           attachZoomEvents(slider) {
  4708.             // Fonctionnalité de zoom à 5 niveaux pour les images
  4709.             const images = slider.querySelectorAll('.slide img');
  4710.             images.forEach(img => {
  4711.               let zoomLevel = 1; // 1x, 1.5x, 2x, 3x, 4x, 5x
  4712.               let isDragging = false;
  4713.               let startX = 0;
  4714.               let startY = 0;
  4715.               let translateX = 0;
  4716.               let translateY = 0;
  4718.               // Clic simple pour zoom progressif (5 niveaux)
  4719.               img.addEventListener('click', (e) => {
  4720.                 e.preventDefault();
  4721.                 e.stopPropagation();
  4722.                 
  4723.                 // Cycle à travers 5 niveaux de zoom
  4724.                 switch(zoomLevel) {
  4725.                   case 1: zoomLevel = 1.5; break;  // 1x → 1.5x
  4726.                   case 1.5: zoomLevel = 2; break;  // 1.5x → 2x
  4727.                   case 2: zoomLevel = 3; break;    // 2x → 3x
  4728.                   case 3: zoomLevel = 4; break;    // 3x → 4x
  4729.                   case 4: zoomLevel = 5; break;    // 4x → 5x
  4730.                   case 5: 
  4731.                     zoomLevel = 1;                 // 5x → 1x (reset)
  4732.                     translateX = 0;
  4733.                     translateY = 0;
  4734.                     break;
  4735.                 }
  4737.                 console.log('Zoom niveau:', zoomLevel);
  4738.                 img.style.transform = `scale(${zoomLevel}) translate(${translateX}px, ${translateY}px)`;
  4739.                 
  4740.                 // Curseur selon le niveau
  4741.                 if (zoomLevel === 1) {
  4742.                   img.style.cursor = 'zoom-in';
  4743.                   img.removeAttribute('data-zoomed');
  4744.                 } else if (zoomLevel === 5) {
  4745.                   img.style.cursor = 'zoom-out';
  4746.                   img.setAttribute('data-zoomed', zoomLevel);
  4747.                 } else {
  4748.                   img.style.cursor = 'zoom-in';
  4749.                   img.setAttribute('data-zoomed', zoomLevel);
  4750.                 }
  4751.               });
  4753.               // Drag pour déplacer l'image zoomée
  4754.               img.addEventListener('mousedown', (e) => {
  4755.                 if (zoomLevel > 1) {
  4756.                   isDragging = true;
  4757.                   startX = e.clientX - translateX;
  4758.                   startY = e.clientY - translateY;
  4759.                   img.style.cursor = 'grabbing';
  4760.                   e.preventDefault();
  4761.                   e.stopPropagation();
  4762.                 }
  4763.               });
  4765.               // Mousemove global pour le drag
  4766.               const handleMouseMove = (e) => {
  4767.                 if (isDragging && zoomLevel > 1) {
  4768.                   translateX = e.clientX - startX;
  4769.                   translateY = e.clientY - startY;
  4770.                   img.style.transform = `scale(${zoomLevel}) translate(${translateX}px, ${translateY}px)`;
  4771.                 }
  4772.               };
  4774.               // Mouseup global pour arrêter le drag
  4775.               const handleMouseUp = () => {
  4776.                 if (isDragging) {
  4777.                   isDragging = false;
  4778.                   if (zoomLevel === 1) {
  4779.                     img.style.cursor = 'zoom-in';
  4780.                   } else if (zoomLevel === 5) {
  4781.                     img.style.cursor = 'zoom-out';
  4782.                   } else {
  4783.                     img.style.cursor = 'zoom-in';
  4784.                   }
  4785.                 }
  4786.               };
  4788.               document.addEventListener('mousemove', handleMouseMove);
  4789.               document.addEventListener('mouseup', handleMouseUp);
  4791.               // Touch support pour mobile
  4792.               img.addEventListener('touchstart', (e) => {
  4793.                 if (zoomLevel > 1 && e.touches.length === 1) {
  4794.                   isDragging = true;
  4795.                   const touch = e.touches[0];
  4796.                   startX = touch.clientX - translateX;
  4797.                   startY = touch.clientY - translateY;
  4798.                   e.preventDefault();
  4799.                 }
  4800.               });
  4802.               img.addEventListener('touchmove', (e) => {
  4803.                 if (isDragging && zoomLevel > 1 && e.touches.length === 1) {
  4804.                   const touch = e.touches[0];
  4805.                   translateX = touch.clientX - startX;
  4806.                   translateY = touch.clientY - startY;
  4807.                   img.style.transform = `scale(${zoomLevel}) translate(${translateX}px, ${translateY}px)`;
  4808.                   e.preventDefault();
  4809.                 }
  4810.               });
  4812.               img.addEventListener('touchend', () => {
  4813.                 isDragging = false;
  4814.               });
  4816.               // Initialiser le curseur
  4817.               img.style.cursor = 'zoom-in';
  4818.             });
  4819.           }
  4820.         }
  4822.         // ⚡ OPTIMISATION MAJEURE: Sliders lazy (créés seulement quand utilisés)
  4823.         let favoritesSlider = null;
  4824.         let universalSlider = null;
  4825.         
  4826.         // Fonctions pour créer les sliders à la demande
  4827.         function getFavoritesSlider() {
  4828.           if (!favoritesSlider) {
  4829.             favoritesSlider = new FavoritesSlider();
  4830.           }
  4831.           return favoritesSlider;
  4832.         }
  4833.         
  4834.         function getUniversalSlider() {
  4835.           if (!universalSlider) {
  4836.             universalSlider = new UniversalImageSlider();
  4837.           }
  4838.           return universalSlider;
  4839.         }
  4841.         // Fonction pour voir un favori avec le slider plein écran
  4842.         function viewFavorite(id) {
  4843.           console.log('Ouverture du slider pour favori:', id);
  4844.           // ⚡ OPTIMISÉ: Utiliser le slider lazy
  4845.           const slider = getUniversalSlider();
  4846.           if (slider && slider.openFromFavorites) {
  4847.             slider.openFromFavorites(id);
  4848.           } else {
  4849.             console.error('Erreur slider favoris');
  4850.           }
  4851.         }
  4853.         // Fonction pour voir une image depuis la galerie normale
  4854.         function viewImage(imageId, clickedElement) {
  4855.           console.log('=== viewImage appelée ===');
  4856.           console.log('imageId:', imageId);
  4857.           console.log('clickedElement:', clickedElement);
  4858.           
  4859.           // Trouver le container du jour - peut être plusieurs niveaux au-dessus
  4860.           let dayContainer = clickedElement;
  4861.           
  4862.           // Remonter jusqu'à trouver un container approprié
  4863.           while (dayContainer && dayContainer !== document.body) {
  4864.             console.log('Checking element:', dayContainer.tagName, dayContainer.className, dayContainer.id);
  4865.             if (dayContainer && dayContainer.classList && (
  4866.                 dayContainer.classList.contains('dynamic-card') || 
  4867.                 dayContainer.classList.contains('collapse') ||
  4868.                 dayContainer.id && dayContainer.id.startsWith('demP')
  4869.             )) {
  4870.               break;
  4871.             }
  4872.             dayContainer = dayContainer.parentElement;
  4873.           }
  4874.           
  4875.           // ⚡ OPTIMISÉ: Logs réduits pour performance
  4876.           
  4877.           // ⚡ OPTIMISÉ: Utiliser le slider lazy
  4878.           const slider = getUniversalSlider();
  4879.           if (slider && slider.openFromGallery) {
  4880.             slider.openFromGallery(imageId, dayContainer);
  4881.           } else {
  4882.             console.error('Erreur slider galerie');
  4883.           }
  4884.         }
  4887.         // ⚡ OPTIMISÉ: Fonctions globales avec sliders lazy
  4888.         window.viewImage = viewImage;
  4889.         window.viewFavorite = viewFavorite;
  4890.         window.getUniversalSlider = getUniversalSlider; // Fonction lazy au lieu de l'instance
  4892.         // Variables globales pour éviter les ReferenceError
  4893.         if (typeof favoriteCount === 'undefined') {
  4894.           window.favoriteCount = 0;
  4895.         }
  4896.         if (typeof favButton === 'undefined') {
  4897.           window.favButton = null;
  4898.         }
  4899.         if (typeof favoriteButton === 'undefined') {
  4900.           window.favoriteButton = null;
  4901.         }
  4902.         if (typeof purchaseAlertTimeout === 'undefined') {
  4903.           window.purchaseAlertTimeout = null;
  4904.         }
  4905.         
  4906.         // Définir favoriteCount globalement pour éviter les ReferenceError
  4907.         let favoriteCount = window.favoriteCount || 0;
  4909.         // Fonction de sécurité pour vérifier les éléments DOM
  4910.         function safeAddEventListener(selector, event, callback) {
  4911.           const element = document.querySelector(selector);
  4912.           if (element) {
  4913.             element.addEventListener(event, callback);
  4914.           } else {
  4915.             console.warn(`Élément non trouvé: ${selector}`);
  4916.           }
  4917.         }
  4919.         // Fonction utilitaire pour manipuler classList de manière sécurisée
  4920.         function safeClassList(element, action, ...classes) {
  4921.           if (!element || !element.classList) {
  4922.             console.warn('Élément ou classList invalide:', element);
  4923.             return false;
  4924.           }
  4925.           
  4926.           try {
  4927.             switch(action) {
  4928.               case 'add':
  4929.                 element.classList.add(...classes);
  4930.                 break;
  4931.               case 'remove':
  4932.                 element.classList.remove(...classes);
  4933.                 break;
  4934.               case 'toggle':
  4935.                 return element.classList.toggle(classes[0], classes[1]);
  4936.               case 'contains':
  4937.                 return element.classList.contains(classes[0]);
  4938.               default:
  4939.                 console.warn('Action classList inconnue:', action);
  4940.                 return false;
  4941.             }
  4942.             return true;
  4943.           } catch (error) {
  4944.             console.warn('Erreur lors de la manipulation de classList:', error);
  4945.             return false;
  4946.           }
  4947.         }
  4949.         // Rendre la fonction utilitaire globale
  4950.         window.safeClassList = safeClassList;
  4952.         // Fonction pour sécuriser automatiquement tous les accès à classList
  4953.         function secureClassListAccess() {
  4954.           // Intercepter les erreurs classList globalement
  4955.           window.addEventListener('error', function(e) {
  4956.             if (e.message && (e.message.includes('classList') || e.message.includes('Cannot read properties of null'))) {
  4957.               console.warn('Erreur DOM interceptée et corrigée:', e.message, 'Ligne:', e.lineno, 'Fichier:', e.filename);
  4958.               e.preventDefault(); // Empêcher l'erreur de se propager
  4959.               return true;
  4960.             }
  4961.           });
  4962.           
  4963.           // Intercepter les erreurs non catchées
  4964.           window.addEventListener('unhandledrejection', function(e) {
  4965.             if (e.reason && e.reason.message && e.reason.message.includes('classList')) {
  4966.               console.warn('Promise rejection classList interceptée:', e.reason.message);
  4967.               e.preventDefault();
  4968.               return true;
  4969.             }
  4970.           });
  4971.           
  4972.           console.log('Système de sécurisation DOM/classList activé');
  4973.         }
  4975.         // Activer la sécurisation
  4976.         secureClassListAccess();
  4978.         // Fonction de diagnostic pour vérifier l'affichage du slider
  4979.         function diagnoseSliderDisplay(sliderId) {
  4980.           const slider = document.querySelector(sliderId);
  4981.           if (!slider) {
  4982.             console.error('Diagnostic: Slider non trouvé -', sliderId);
  4983.             return false;
  4984.           }
  4985.           
  4986.           const styles = window.getComputedStyle(slider);
  4987.           const rect = slider.getBoundingClientRect();
  4988.           
  4989.           console.log('=== DIAGNOSTIC SLIDER ===', sliderId);
  4990.           console.log('Élément présent:', !!slider);
  4991.           console.log('Styles calculés:', {
  4992.             display: styles.display,
  4993.             opacity: styles.opacity,
  4994.             visibility: styles.visibility,
  4995.             zIndex: styles.zIndex,
  4996.             position: styles.position
  4997.           });
  4998.           console.log('Position/Taille:', rect);
  4999.           console.log('Dans le viewport:', rect.width > 0 && rect.height > 0);
  5000.           console.log('Parent:', slider.parentElement?.tagName);
  5001.           
  5002.           // Vérifier les règles CSS qui pourraient masquer le slider
  5003.           const hiddenReasons = [];
  5004.           if (styles.display === 'none') hiddenReasons.push('display: none');
  5005.           if (styles.opacity === '0') hiddenReasons.push('opacity: 0');
  5006.           if (styles.visibility === 'hidden') hiddenReasons.push('visibility: hidden');
  5007.           if (parseInt(styles.zIndex) < 0) hiddenReasons.push('z-index négatif');
  5008.           
  5009.           if (hiddenReasons.length > 0) {
  5010.             console.warn('Raisons du masquage:', hiddenReasons);
  5011.             
  5012.             // Forcer l'affichage
  5013.             console.log('Forçage de l\'affichage...');
  5014.             slider.style.display = 'flex';
  5015.             slider.style.opacity = '1';
  5016.             slider.style.visibility = 'visible';
  5017.             slider.style.zIndex = '9999';
  5018.             slider.style.position = 'fixed';
  5019.             slider.style.top = '0';
  5020.             slider.style.left = '0';
  5021.             slider.style.width = '100%';
  5022.             slider.style.height = '100%';
  5023.             
  5024.             console.log('Slider forcé visible');
  5025.           } else {
  5026.             console.log('✅ Slider devrait être visible');
  5027.           }
  5028.           
  5029.           return true;
  5030.         }
  5032.         // Rendre la fonction globale
  5033.         window.diagnoseSliderDisplay = diagnoseSliderDisplay;
  5035.         // Fonction de sécurité pour checkFavorites
  5036.         function checkFavorites() {
  5037.           try {
  5038.             let count = 0;
  5039.             if (typeof getFavoriteItems === 'function') {
  5040.               count = getFavoriteItems().length;
  5041.             } else {
  5042.               // Fallback : compter depuis le DOM
  5043.               const giftCount = document.getElementById('giftCount');
  5044.               if (giftCount && giftCount.textContent) {
  5045.                 count = parseInt(giftCount.textContent.trim()) || 0;
  5046.               }
  5047.             }
  5048.             
  5049.             // Mettre à jour les variables globales
  5050.             window.favoriteCount = count;
  5051.             favoriteCount = count;
  5052.             
  5053.             console.log('Favoris vérifiés:', count);
  5054.             return count;
  5055.           } catch (error) {
  5056.             console.warn('Erreur lors de la vérification des favoris:', error);
  5057.             return 0;
  5058.           }
  5059.         }
  5061.         // Rendre checkFavorites globale si elle n'existe pas
  5062.         if (typeof window.checkFavorites === 'undefined') {
  5063.           window.checkFavorites = checkFavorites;
  5064.         }
  5066.         // Initialisation sécurisée après chargement du DOM
  5067.         document.addEventListener('DOMContentLoaded', function() {
  5068.           console.log('=== DOM chargé, initialisation des sliders ===');
  5069.           console.log('viewImage disponible:', typeof window.viewImage);
  5070.           console.log('viewFavorite disponible:', typeof window.viewFavorite);
  5071.           console.log('universalSlider disponible:', typeof window.universalSlider);
  5072.           
  5073.           // Vérifier que les éléments critiques existent
  5074.           const criticalElements = [
  5075.             'filtre_photos_voir',
  5076.             // Ajoutez d'autres IDs critiques ici si nécessaire
  5077.           ];
  5078.           
  5079.           criticalElements.forEach(id => {
  5080.             const element = document.getElementById(id);
  5081.             if (element) {
  5082.               console.log(`✓ Élément trouvé: ${id}`);
  5083.             } else {
  5084.               console.warn(`⚠ Élément manquant: ${id}`);
  5085.             }
  5086.           });
  5087.           
  5088.           // Initialiser checkFavorites si la fonction existe
  5089.           if (typeof window.checkFavorites === 'function') {
  5090.             window.checkFavorites();
  5091.           }
  5092.         });
  5094.       
  5095.         // Fonction pour obtenir l'image d'un produit selon son type
  5096.         function getProductImage(productId) {
  5097.           const productImages = {
  5098.             'album': '/images/produit/Album5sur5-3.jpg',
  5099.             'digital': '/images/produit/photoNumerique.jpg', 
  5100.             'prints': '/images/produit/PochettePhoto5sur5-2.jpg',
  5101.             'calendrier': '/images/produit/Calendrier5sur5-1.jpg',
  5102.             'livre': '/images/produit/LivreSouvenir5sur5-1.jpg',
  5103.             'coffret': '/images/produit/CoffretCadeau5sur5-2.jpg',
  5104.             'retro': '/images/produit/PochetteRetro5sur5-1.jpg'
  5105.           };
  5106.           
  5107.           return productImages[productId] || '/images/produit/albumm.PNG';
  5108.         }
  5109.         
  5110.         // Fonction pour générer les suggestions de produits (synchronisées avec ecommerce-sidebar)
  5111.         // 🗑️ SUPPRIMÉ : generateProductSuggestions() - remplacé par le sidebar e-commerce
  5112.         // Le sidebar e-commerce (sidebar-ecommerce-pro.js) gère maintenant tous les produits
  5113.         // de manière centralisée et dynamique
  5115.         // Fonction pour obtenir le nombre actuel de favoris
  5116.         function getCurrentFavoriteCount() {
  5117.           return getFavoriteItems().length;
  5118.         }
  5120.         // 🎯 SUPPRIMÉ: Fonction dupliquée - la vraie est dans parent-toasts.js
  5121.         // Cette fonction était en conflit avec updateProductSuggestions() de parent-toasts.js
  5122.         // qui gère déjà les mises à jour dynamiques avec dates et contexte
  5123.         
  5124.         // Fonction legacy pour compatibilité (redirige vers parent-toasts.js)
  5125.         window.updateProductSuggestionsLive = function(favoriteCount) {
  5126.           console.log('[Legacy] updateProductSuggestionsLive appelé, redirection vers parent-toasts.js');
  5127.           // La vraie logique est dans parent-toasts.js > updateProductSuggestions()
  5128.           // qui est appelée automatiquement par le MutationObserver
  5129.         }
  5131.         // Gestion du localStorage pour l'indicateur "nouveau contenu"
  5132.         const lastVisitKey = 'lastVisitISO';
  5133.         const currentVisit = new Date().toISOString();
  5134.         
  5135.         // Sauvegarder la visite actuelle
  5136.         localStorage.setItem(lastVisitKey, currentVisit);
  5137.         
  5138.         // Vérifier et marquer les jours avec nouveau contenu
  5139.         const dateCards = document.querySelectorAll('.date-card.modern-card');
  5140.         dateCards.forEach(card => {
  5141.           // Ici vous devriez comparer avec updatedAt du backend
  5142.           // Pour l'instant, on simule avec un attribut data-updated
  5143.           const updatedAt = card.getAttribute('data-updated');
  5144.           if (updatedAt) {
  5145.             const lastVisit = localStorage.getItem(lastVisitKey);
  5146.             if (new Date(updatedAt) > new Date(lastVisit)) {
  5147.               if (card && card.classList) {
  5148.                 card.classList.add('has-new-content');
  5149.               }
  5150.               // Ajouter le badge "nouveau" si pas déjà présent
  5151.               if (!card.querySelector('.badge-new')) {
  5152.                 const badge = document.createElement('span');
  5153.                 badge.className = 'badge-new';
  5154.                 badge.setAttribute('aria-label', 'Nouveau contenu');
  5155.                 card.querySelector('.title-line').appendChild(badge);
  5156.               }
  5157.             }
  5158.           }
  5159.         });
  5161.         // Gestion des aria-label dynamiques pour les cartes de jours
  5162.         dateCards.forEach(card => {
  5163.           const dayText = card.querySelector('.day').textContent.trim();
  5164.           const dateText = card.querySelector('.full-date').textContent.trim();
  5165.           const photos = card.querySelector('.media-list-horizontal li:nth-child(1)')?.textContent.trim() || '0';
  5166.           const audios = card.querySelector('.media-list-horizontal li:nth-child(2)')?.textContent.trim() || '0';
  5167.           const videos = card.querySelector('.media-list-horizontal li:nth-child(3)')?.textContent.trim() || '0';
  5168.           
  5169.           const ariaLabel = `Contenu du ${dateText} : ${photos} photos, ${audios} audios, ${videos} vidéos`;
  5170.           card.setAttribute('aria-label', ariaLabel);
  5171.         });
  5172.       });
  5173.     </script>
  5174.     
  5175.     <!-- Make sure we're showing the right content by default if no valid content is marked 'show' -->
  5176.     {% if lastValidIndex > 0 %}
  5177.     <script>
  5178.       document.addEventListener('DOMContentLoaded', function() {
  5179.         // Check if no content is showing
  5180.         if (document.querySelectorAll('.container--gallery .collapse.show').length === 0) {
  5181.           // Show the content for the last valid date
  5182.           var lastValidContent = document.getElementById('demP{{ lastValidIndex }}');
  5183.           if (lastValidContent) {
  5184.             if (lastValidContent.classList) {
  5185.               lastValidContent.classList.add('show');
  5186.             }
  5187.             
  5188.             // Also mark the corresponding date card as active
  5189.             var dateCards = document.querySelectorAll('.date-card');
  5190.             if (dateCards.length >= {{ lastValidIndex }}) {
  5191.               dateCards.forEach(card => {
  5192.                 if (card && card.classList) {
  5193.                   card.classList.remove('active');
  5194.                 }
  5195.               });
  5196.               const targetCard = dateCards[{{ lastValidIndex - 1 }}];
  5197.               if (targetCard && targetCard.classList) {
  5198.                 targetCard.classList.add('active');
  5199.               }
  5200.             }
  5201.           }
  5202.         }
  5203.       });
  5204.     </script>
  5205.     {% endif %}
  5206.   </div>
  5207. </div>
  5209.   {% endblock %} {% block Javascript %}
  5210.   {{ parent() }}
  5211.   <script>// Gestion de la sidebar des favoris
  5212. document.addEventListener('DOMContentLoaded', function() {
  5213.     const sidebar = document.getElementById('favorites-sidebar');
  5214.     const openBtn = document.getElementById('openFavoritesSidebar');
  5215.     const closeBtn = document.querySelector('.favorites-close');
  5216.     const giftButton = document.querySelector('.gift-button');
  5218.     function openSidebar() {
  5219.         if (sidebar && sidebar.classList) {
  5220.           sidebar.classList.add('active');
  5221.           updateFavoritesSidebar();
  5222.         }
  5223.     }
  5225.     function closeSidebar() {
  5226.         if (sidebar && sidebar.classList) {
  5227.           sidebar.classList.remove('active');
  5228.         }
  5229.     }
  5231.     function updateFavoritesSidebar() {
  5232.         const grid = document.getElementById('favorites-grid');
  5233.         const counter = document.getElementById('favorites-counter');
  5234.         const emptyState = document.getElementById('favorites-empty-state');
  5235.         const progress = document.getElementById('favorites-progress');
  5236.         
  5237.         const mesFavCount = document.getElementById('mesFavCount');
  5238.         const count = mesFavCount ? getFavorisCount() : 0;
  5239.         counter.textContent = count;
  5240.         
  5241.         if (count === 0) {
  5242.             emptyState.style.display = 'flex';
  5243.             grid.style.display = 'none';
  5244.         } else {
  5245.             emptyState.style.display = 'none';
  5246.             grid.style.display = 'grid';
  5247.             const percentage = (count / 20) * 100;
  5248.             progress.style.width = `${percentage}%`;
  5249.         }
  5250.     }
  5252.     if (openBtn) {
  5253.         openBtn.addEventListener('click', openSidebar);
  5254.     }
  5256.     if (favButton) {
  5257.         favButton.addEventListener('click', openSidebar);
  5258.     }
  5260.     if (closeBtn) {
  5261.         closeBtn.addEventListener('click', closeSidebar);
  5262.     }
  5264.     document.addEventListener('click', (e) => {
  5265.         if (sidebar && sidebar.classList && sidebar.classList.contains('active') && 
  5266.             !sidebar.contains(e.target) && 
  5267.             (!favButton || !favButton.contains(e.target)) && 
  5268.             (!openBtn || !openBtn.contains(e.target))) {
  5269.             closeSidebar();
  5270.         }
  5271.     });
  5272. });
  5273. // Modification des fonctions existantes
  5274. const originalAddFavoris = window.AddFavoris;
  5275. window.AddFavoris = function($id, $idSejour, $urlimg, $description) {
  5276.     if (originalAddFavoris) {
  5277.         originalAddFavoris($id, $idSejour, $urlimg, $description);
  5278.     }
  5279.     
  5280.   
  5281.     
  5282.     // Vérifier si la sidebar est ouverte - noter que nous vérifions la valeur CSS right: 0
  5283.     if ($("#favorites-sidebar").css("right") === "0px") {
  5284.         // Recharger les favoris
  5285.         loadFavorites();
  5286.     }
  5287. };
  5289. const originalSupprimerFavoris = window.supprimerFavoris;
  5290. window.supprimerFavoris = function($id, $idSejour) {
  5291.     if (originalSupprimerFavoris) {
  5292.         originalSupprimerFavoris($id, $idSejour);
  5293.     }
  5294.     
  5295.     // Mettre à jour tous les compteurs de favoris
  5296.     updateAllFavoriteCounters();
  5297.     
  5298.     // Vérifier si la sidebar est ouverte
  5299.     if ($("#favorites-sidebar").css("right") === "0px") {
  5300.         // Recharger les favoris
  5301.         loadFavorites();
  5302.     }
  5303. };
  5305. // Variables globales
  5306. let selectedFavorites = [];
  5307. let allFavorites = [];
  5309. // Fonction pour mettre à jour la sidebar
  5310. function loadFavorites() {
  5311.     $("#favorites-grid").html("<div style='text-align:center;padding:20px;'>Chargement...</div>");
  5312.     
  5313.     $.ajax({
  5314.         url: "/Parent/mes-favoris",
  5315.         type: "GET",
  5316.         dataType: "json",
  5317.         success: function(data) {
  5318.             $("#favorites-grid").empty();
  5319.             allFavorites = data.data || [];
  5320.             
  5321.             if (allFavorites.length > 0) {
  5322.                 $("#favorites-empty-state").hide();
  5323.                 
  5324.                 $.each(allFavorites, function(i, fav) {
  5325.                     var isSelected = selectedFavorites.includes(fav.id);
  5326.                     
  5327.                     var item = $("<div class='favorite-item' style='position:relative;border-radius:8px;overflow:hidden;aspect-ratio:1;cursor:pointer;'></div>");
  5328.                     var img = $("<img style='width:100%;height:100%;object-fit:cover;transition:transform 0.3s ease;'>").attr("src", fav.path).attr("alt", fav.descreption || "Photo favorite");
  5329.                     
  5330.                     // Overlay de sélection
  5331.                     var selectionOverlay = $("<div class='selection-overlay' style='position:absolute;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.3);display:flex;align-items:center;justify-content:center;'></div>");
  5332.                     
  5333.                     // Icône de sélection
  5334.                     var checkIcon = $("<div style='width:25px;height:25px;border-radius:50%;border:2px solid white;display:flex;align-items:center;justify-content:center;background:" + (isSelected ? "#F56040" : "transparent") + ";transition:background 0.2s;'></div>");
  5335.                     if (isSelected) {
  5336.                         checkIcon.append("<i class='bi bi-check' style='color:white;font-size:16px;'></i>");
  5337.                     }
  5338.                     
  5339.                     selectionOverlay.append(checkIcon);
  5340.                     
  5341.                     // Overlay d'action (bouton supprimer)
  5342.                     var actionOverlay = $("<div class='action-overlay' style='position:absolute;top:5px;right:5px;opacity:0;transition:opacity 0.2s;'></div>");
  5343.                   
  5344.                     actionOverlay.append(deleteBtn);
  5345.                     
  5346.                     // Ajouter les événements
  5347.                     item.hover(
  5348.                         function() { $(this).find(".action-overlay").css("opacity", "1"); },
  5349.                         function() { $(this).find(".action-overlay").css("opacity", "0"); }
  5350.                     );
  5351.                     
  5352.                     item.click(function() {
  5353.                         toggleSelection(fav.id, $(this).find(".selection-overlay > div"));
  5354.                     });
  5355.                     
  5356.                     item.append(img).append(selectionOverlay).append(actionOverlay);
  5357.                     $("#favorites-grid").append(item);
  5358.                 });
  5359.                 
  5360.                 $("#favorites-counter").text(allFavorites.length);
  5361.                 
  5362.                 // Mettre à jour le compteur sur le bouton également
  5363.                 $("#openFavoritesSidebar span").text(allFavorites.length);
  5364.                 
  5365.                 // Mettre à jour l'interface produits
  5366.                 updateProductsView();
  5367.                 
  5368.             } else {
  5369.                 $("#favorites-empty-state").show();
  5370.                 $("#favorites-counter").text("0");
  5371.                 $("#openFavoritesSidebar span").text("0");
  5372.                 $("#selection-count").text("0");
  5373.                 updateProductsView();
  5374.             }
  5375.         },
  5376.         error: function() {
  5377.             $("#favorites-grid").html("<div style='color:red;text-align:center;padding:20px;'>Erreur de chargement</div>");
  5378.         }
  5379.     });
  5380. }
  5382. // Fonction pour supprimer un favori
  5383. function removeFavorite(id) {
  5384.     $.ajax({
  5385.         url: "/Parent/remove-favorite/" + id,
  5386.         type: "POST",
  5387.         success: function() {
  5388.             // Retirer de la sélection si présent
  5389.             selectedFavorites = selectedFavorites.filter(favId => favId != id);
  5390.             
  5391.             // Mettre à jour le compteur de sélection
  5392.             $("#selection-count").text(selectedFavorites.length);
  5393.             
  5394.             // Recharger les favoris
  5395.             loadFavorites();
  5396.             
  5397.             // Mettre à jour tous les compteurs de favoris
  5398.             updateAllFavoriteCounters();
  5399.             
  5400.             // Mettre à jour l'interface produits
  5401.             updateProductsView();
  5402.         },
  5403.         error: function() {
  5404.             alert("Erreur lors de la suppression du favori");
  5405.         }
  5406.     });
  5407. }
  5409. // Fonction pour basculer la sélection d'une photo
  5410. function toggleSelection(id, checkElement) {
  5411.     const index = selectedFavorites.indexOf(id);
  5412.     
  5413.     if (index === -1) {
  5414.         // Ajouter à la sélection
  5415.         selectedFavorites.push(id);
  5416.         checkElement.css("background", "#F56040");
  5417.         checkElement.html("<i class='bi bi-check' style='color:white;font-size:16px;'></i>");
  5418.     } else {
  5419.         // Retirer de la sélection
  5420.         selectedFavorites.splice(index, 1);
  5421.         checkElement.css("background", "transparent");
  5422.         checkElement.html("");
  5423.     }
  5424.     
  5425.     // Mettre à jour le compteur
  5426.     $("#selection-count").text(selectedFavorites.length);
  5427.     
  5428.     // Mettre à jour l'interface produits
  5429.     updateProductsView();
  5430. }
  5432. // Fonction pour mettre à jour la vue des produits
  5433. function updateProductsView() {
  5434.     const current = selectedFavorites.length;
  5435.     $("#product-photo-count").text(current);
  5436.     
  5437.     let remainingForAlbum = Math.max(0, 20 - current);
  5438.     let remainingForPochette = Math.max(0, 12 - current);
  5439.     let remainingForPack = Math.max(0, 12 - current);
  5441.     const progressBar = (count, total, color) => `
  5442.         <div style="margin: 5px 0;">
  5443.             <div style="background-color: #e9ecef; border-radius: 5px; overflow: hidden; height: 8px;">
  5444.                 <div style="width: ${(count / total) * 100}%; background-color: ${color}; height: 100%;"></div>
  5445.             </div>
  5446.             <small style="font-size: 12px;">${count}/${total} photos</small>
  5447.         </div>
  5448.     `;
  5450.     // Liste des produits
  5451.     const products = [
  5452.         {
  5453.             name: "Pack numérique (20 photos)",
  5454.             required: 20,
  5455.             remaining: Math.max(0, 20 - current),
  5456.             image: "/images/produit/photoNumerique.jpg",
  5457.             color: "#4caf50",
  5458.             link: "{{ path('PackPhotosNumerique_Favoris', {'nbr':20}) }}",
  5459.         },
  5460.        +
  5461.         {
  5462.             name: "Pochette photo (12 photos)",
  5463.             required: 12,
  5464.             remaining: Math.max(0, 12 - current),
  5465.             image: "/images/produit/PochettePhoto5sur5-2.jpg",
  5466.             color: "#2196f3",
  5467.             link: "{{ path('AjoutPochettePhotos_Favoris', {'nbr': 12}) }}",
  5468.         },
  5469.     ].sort((a, b) => a.remaining - b.remaining);
  5471.     const productList = products
  5472.         .map((product) => {
  5473.             const count = current;
  5474.             const total = product.required;
  5475.             const remaining = product.remaining;
  5477.             return `
  5478.                 <li style="margin-bottom: 20px;">
  5479.                     <div style="display: flex; align-items: center; gap: 10px;">
  5480.                         <img src="${product.image}" alt="${product.name}" style="width: 70px; height: 70px; border-radius: 5px; object-fit: cover;" />
  5481.                         <div style="flex: 1;">
  5482.                             <strong style="font-size: 14px;">${product.name}</strong>
  5483.                             ${progressBar(count, total, product.color)}
  5484.                             ${
  5485.                                 `<small style="color: ${product.color}; font-size: 12px;">
  5486.                                     Encore ${remaining} photos pour compléter ${product.name.toLowerCase()}
  5487.                                 </small>
  5488.                                 <button
  5489.                                     style="
  5490.                                         margin-top: 5px;
  5491.                                         padding: 6px 12px;
  5492.                                         background-color: ${product.color};
  5493.                                         color: white;
  5494.                                         border: none;
  5495.                                         border-radius: 5px;
  5496.                                         font-size: 13px;
  5497.                                         cursor: pointer;
  5498.                                     "
  5499.                                     onclick="window.location.href='${product.link}'"
  5500.                                 >
  5501.                                     Commander
  5502.                                 </button>`
  5503.                             }
  5504.                         </div>
  5505.                     </div>
  5506.                 </li>
  5507.             `;
  5508.         })
  5509.         .join("");
  5511.     const boutiqueButton = `
  5512.         <li style="margin-top: 25px; text-align: center;">
  5513.             <button
  5514.                 style="
  5515.                     padding: 8px 15px;
  5516.                     background-color: #F56040;
  5517.                     color: white;
  5518.                     border: none;
  5519.                     border-radius: 5px;
  5520.                     font-size: 14px;
  5521.                     width: 170px;
  5522.                     height: 40px;
  5523.                     cursor: pointer;
  5524.                 "
  5525.                 onclick="window.location.href='{{ path('boutique5sur5') }}'"
  5526.             >
  5527.                 Voir toute la boutique
  5528.             </button>
  5529.         </li>
  5530.     `;
  5532.     $("#product-list").html(productList + boutiqueButton);
  5533. }
  5535. // Modifications au script existant
  5536. $(document).ready(function() {
  5537.     // Fonctions pour ouvrir/fermer la sidebar
  5538.     $("#openFavoritesSidebar").click(function() {
  5539.         $("#favorites-sidebar").css("right", "0");
  5540.         loadFavorites();
  5541.     });
  5542.     
  5543.     $("#close-favorites-btn").click(function() {
  5544.         closeFavoritesSidebar();
  5545.     });
  5546.     
  5547.     // Fonction pour fermer la sidebar
  5548.     window.closeFavoritesSidebar = function() {
  5549.         $("#favorites-sidebar").css("right", "-500px");
  5550.     };
  5551.     
  5552.     // Tout sélectionner / Tout désélectionner
  5553.     $("#select-all-btn").click(function() {
  5554.         if (selectedFavorites.length === allFavorites.length) {
  5555.             // Tout désélectionner
  5556.             selectedFavorites = [];
  5557.             $(".selection-overlay > div").css("background", "transparent").html("");
  5558.             $(this).text("Tout sélectionner");
  5559.         } else {
  5560.             // Tout sélectionner
  5561.             selectedFavorites = allFavorites.map(fav => fav.id);
  5562.             $(".selection-overlay > div").css("background", "#F56040").html("<i class='bi bi-check' style='color:white;font-size:16px;'></i>");
  5563.             $(this).text("Tout désélectionner");
  5564.         }
  5565.         
  5566.         // Mettre à jour le compteur
  5567.         $("#selection-count").text(selectedFavorites.length);
  5568.         
  5569.         // Mettre à jour l'interface produits
  5570.         updateProductsView();
  5571.     });
  5572.     
  5573.     // Gestion des onglets
  5574.     $(".sidebar-tab").click(function() {
  5575.         $(".sidebar-tab").removeClass("active").css({
  5576.             "color": "#666",
  5577.             "border-bottom": "none"
  5578.         });
  5579.         $(this).addClass("active").css({
  5580.             "color": "#F56040",
  5581.             "border-bottom": "2px solid #F56040"
  5582.         });
  5583.         
  5584.         const tabId = $(this).attr("id");
  5585.         $(".tab-content").hide();
  5586.         
  5587.         if (tabId === "tab-photos") {
  5588.             $("#photos-content").show();
  5589.         } else if (tabId === "tab-products") {
  5590.             $("#products-content").show();
  5591.         }
  5592.     });
  5593.     
  5594.     // Modifier les fonctions existantes pour intercepter l'ajout/suppression de favoris
  5595.     const originalAddFavoris = window.AddFavoris;
  5596.     window.AddFavoris = function($id, $idSejour, $urlimg, $description) {
  5597.         if (originalAddFavoris) {
  5598.             originalAddFavoris($id, $idSejour, $urlimg, $description);
  5599.         }
  5600.         
  5601.         // Mettre à jour tous les compteurs de favoris
  5602.         updateAllFavoriteCounters();
  5603.         
  5604.         // Recharger les favoris si la sidebar est ouverte
  5605.         if ($("#favorites-sidebar").css("right") === "0px") {
  5606.             loadFavorites();
  5607.         }
  5608.     };
  5610.     const originalSupprimerFavoris = window.supprimerFavoris;
  5611.     window.supprimerFavoris = function($id, $idSejour) {
  5612.         if (originalSupprimerFavoris) {
  5613.             originalSupprimerFavoris($id, $idSejour);
  5614.         }
  5615.         
  5616.         // Mettre à jour tous les compteurs de favoris
  5617.         updateAllFavoriteCounters();
  5618.         
  5619.         // Recharger les favoris si la sidebar est ouverte
  5620.         if ($("#favorites-sidebar").css("right") === "0px") {
  5621.             // Retirer de la sélection si présent
  5622.             selectedFavorites = selectedFavorites.filter(favId => favId != $id);
  5623.             loadFavorites();
  5624.         }
  5625.     };
  5626.     
  5627.     // Fermer en cliquant en dehors
  5628.     $(document).click(function(event) {
  5629.         if (!$(event.target).closest("#favorites-sidebar").length && 
  5630.             !$(event.target).closest("#openFavoritesSidebar").length && 
  5631.             $("#favorites-sidebar").css("right") === "0px") {
  5632.             closeFavoritesSidebar();
  5633.         }
  5634.     });
  5635. });
  5636. // Initialisation de la sidebar
  5637. $(document).ready(function() {
  5638.     // Fonctions pour ouvrir/fermer la sidebar
  5639.     $("#openFavoritesSidebar").click(function() {
  5640.         $("#favorites-sidebar").css("right", "0");
  5641.         loadFavorites();
  5642.     });
  5643.     
  5644.     $("#close-favorites-btn").click(function() {
  5645.         $("#favorites-sidebar").css("right", "-500px");
  5646.     });
  5647.     
  5648.     // Fermer en cliquant en dehors
  5649.     $(document).click(function(event) {
  5650.         if (!$(event.target).closest("#favorites-sidebar").length && 
  5651.             !$(event.target).closest("#openFavoritesSidebar").length && 
  5652.             $("#favorites-sidebar").css("right") === "0px") {
  5653.             $("#favorites-sidebar").css("right", "-500px");
  5654.         }
  5655.     });
  5656. });
  5657.   </script>
  5658.   <script src="{{ asset('js/splide.min.js') }}" defer></script>
  5659.    
  5660. <script>
  5662.   document.addEventListener('DOMContentLoaded', function () {
  5663.     const openBtn = document.getElementById('openFavoritesSidebar');
  5664.     const sidebar = document.getElementById('favorites-sidebar');
  5665.     const closeBtn = document.getElementById('favorites-close');
  5667.     if (openBtn && sidebar) {
  5668.       openBtn.addEventListener('click', () => {
  5669.         if (sidebar && sidebar.classList) {
  5670.           sidebar.classList.add('active');
  5671.         }
  5672.       });
  5673.     }
  5675.     if (closeBtn && sidebar) {
  5676.       closeBtn.addEventListener('click', () => {
  5677.         if (sidebar && sidebar.classList) {
  5678.           sidebar.classList.remove('active');
  5679.         }
  5680.       });
  5681.     }
  5682.   });
  5683. </script>
  5685.  
  5686. <script>
  5687. document.addEventListener('DOMContentLoaded', function() {
  5688.   const filterBadges = document.querySelectorAll('.filter-badge');
  5690.   filterBadges.forEach(badge => {
  5691.     badge.addEventListener('click', function() {
  5692.       // Désactiver tous les badges
  5693.       filterBadges.forEach(b => {
  5694.         if (b && b.classList) {
  5695.           b.classList.remove('active');
  5696.         }
  5697.       });
  5699.       // Activer le badge cliqué
  5700.       if (this && this.classList) {
  5701.         this.classList.add('active');
  5702.       }
  5704.     });
  5705.   });
  5706. });
  5708. </script>
  5709.   <script
  5710.     type="text/javascript"
  5711.     src="{{ asset('Accueil/js/jquery.magnific-popup.min.js') }}"
  5712.   ></script>
  5713.   <script>
  5714. document.addEventListener('DOMContentLoaded', function () {
  5715.   const prevButtons = document.querySelectorAll('.btn-prev-day');
  5716.   const nextButtons = document.querySelectorAll('.btn-next-day');
  5717.   const dateCards = document.querySelectorAll('.date-card.modern-card');
  5718.   const collapseSections = document.querySelectorAll('.collapse');
  5720.   // 🎯 MEDIA TOOLBAR CAPSULE - État global et logique (Senior UX)
  5721.   (() => {
  5722.     // État global de filtre
  5723.     const MediaFilter = { current: 'all' };
  5725.     // Compteurs dynamiques
  5726.     const counters = { photo: 0, audio: 0, video: 0, fav: 0 };
  5727.     
  5728.     const updateCounts = () => {
  5729.       // Compter les médias dans le DOM
  5730.       counters.photo = document.querySelectorAll('.photo-item, [data-media-type="photo"]').length;
  5731.       counters.video = document.querySelectorAll('[data-media-type="video"]').length;
  5732.       counters.audio = document.querySelectorAll('.audio-message-item[data-type="audio"]').length;
  5733.       // NE PAS recalculer seulement les favoris - ils utilisent {{ nblikes }}
  5734.       
  5735.       // Mettre à jour l'affichage (sauf favoris)
  5736.       Object.entries(counters).forEach(([k, v]) => {
  5737.         if (k !== 'fav') { // Garder seulement le compteur favoris intact
  5738.           document.querySelectorAll(`.mtb-count[data-bind="${k}"]`).forEach(el => el.textContent = v);
  5739.         }
  5740.       });
  5741.     };
  5743.     // Simple fonction pour le filtre actuel
  5744.     function setActive(filter) {
  5745.       MediaFilter.current = filter;
  5746.       
  5747.       // Exception : ne pas ajouter de classe active au bouton photos
  5748.       if (filter === 'photos') {
  5749.         const photosBtn = document.querySelector('.mtb-btn[data-filter="photos"]');
  5750.         if (photosBtn) {
  5751.           photosBtn.classList.remove('active', 'is-active');
  5752.         }
  5753.       }
  5754.     }
  5756.     // Fonction simplifiée qui mappe et appelle filterContent
  5757.     function applyFilter(filter) {
  5758.       // Mapper les filtres de la capsule vers les filtres existants si nécessaire
  5759.       const filterMap = {
  5760.         'all': 'toutVoir',
  5761.         'photos': 'photos', 
  5762.         'audio': 'audio',
  5763.         'videos': 'videos',
  5764.         'favoris': 'favoris'
  5765.       };
  5766.       
  5767.       const mappedFilter = filterMap[filter] || filter;
  5768.       
  5769.       // Pour le filtre "all", s'assurer que la vue des jours est restaurée
  5770.       if (filter === 'all') {
  5771.         const containerGallery = document.querySelector('.container--gallery');
  5772.         if (containerGallery) {
  5773.           containerGallery.style.display = 'block';
  5774.         }
  5775.       }
  5776.       
  5777.       if (typeof window.filterContent === 'function') {
  5778.         window.filterContent(mappedFilter);
  5779.       } else {
  5780.         console.error('window.filterContent n\'est pas disponible');
  5781.       }
  5782.     }
  5784.     // Click handlers - exactement la même logique que stat-pill
  5785.     document.addEventListener('click', (e) => {
  5786.       const btn = e.target.closest('.mtb-btn');
  5787.       if (!btn) return;
  5789.       // Bouton fermer
  5790.       if (btn.classList.contains('mtb-close')) {
  5791.         document.querySelector('.media-toolbar')?.remove();
  5792.         return;
  5793.       }
  5795.       const filter = btn.dataset.filter;
  5796.       if (!filter) return;
  5798.       // 🎯 CAS SPÉCIAL : Bouton favoris (filtre + ouvre sidebar, JAMAIS de modification du compteur)
  5799.       if (filter === 'favoris') {
  5800.         console.log('💗 BOUTON FAVORIS CLIQUÉ - Vue favoris + ouverture sidebar');
  5801.         
  5802.         // 🛡️ Protection ABSOLUE : empêcher TOUTE propagation vers d'autres handlers
  5803.         e.stopPropagation();
  5804.         e.stopImmediatePropagation();
  5805.         e.preventDefault();
  5806.         
  5807.         // 1️⃣ Activer visuellement le bouton favoris
  5808.         const mtbBtns = document.querySelectorAll('.mtb-btn[data-filter]');
  5809.         mtbBtns.forEach(b => {
  5810.           if (b === btn) {
  5811.             b.classList.add('active');
  5812.           } else {
  5813.             b.classList.remove('active');
  5814.           }
  5815.         });
  5816.         
  5817.         // 2️⃣ Filtrer la galerie pour afficher uniquement les favoris
  5818.         if (typeof window.filterContent === 'function') {
  5819.           window.filterContent('favoris');
  5820.         } else {
  5821.           console.error('❌ window.filterContent non disponible');
  5822.         }
  5823.         
  5824.         // 3️⃣ Ouvrir le sidebar e-commerce via le bouton cadeau
  5825.         const giftButton = document.getElementById('gift-button-trigger');
  5826.         if (giftButton) {
  5827.           console.log('🎁 Ouverture du sidebar via bouton cadeau');
  5828.           setTimeout(() => giftButton.click(), 100); // Petit délai pour éviter les conflits
  5829.         } else {
  5830.           console.warn('⚠️ Bouton cadeau non trouvé');
  5831.         }
  5832.         
  5833.         return; // ⛔ SORTIE IMMÉDIATE - pas de traitement supplémentaire
  5834.       }
  5836.       // 🎯 CAS SPÉCIAL : Bouton audio avec 0 message → afficher popover
  5837.       if (filter === 'audio') {
  5838.         const audioCount = btn.querySelector('.mtb-count[data-bind="audio"]');
  5839.         const count = audioCount ? parseInt(audioCount.textContent.trim()) : 0;
  5840.         
  5841.         if (count === 0) {
  5842.           console.log('🎤 Bouton audio cliqué avec 0 message - affichage popover');
  5843.           
  5844.           e.stopPropagation();
  5845.           e.preventDefault();
  5846.           
  5847.           // Afficher le popover premium
  5848.           showAudioEmptyPopover(btn);
  5849.           return; // ⛔ Ne pas filtrer si 0 message
  5850.         }
  5851.       }
  5853.       // Exception pour le bouton photos : ne pas modifier les états actifs
  5854.       if (btn.dataset.filter === 'photos') {
  5855.         // Pour le bouton photos, ne pas toucher aux autres boutons
  5856.         // Juste exécuter l'action sans changer les états
  5857.       } else {
  5858.         // Pour les autres boutons : gérer les états actifs normalement
  5859.         const mtbBtns = document.querySelectorAll('.mtb-btn[data-filter]');
  5860.         for (let i = 0; i < mtbBtns.length; i++) {
  5861.           const b = mtbBtns[i];
  5862.           if (b && b.classList) {
  5863.             if (b === btn) {
  5864.               b.classList.add('active');
  5865.             } else {
  5866.               b.classList.remove('active');
  5867.             }
  5868.           }
  5869.         }
  5870.       }
  5871.       
  5872.       // Déclencher le filtrage du contenu - même logique que stat-pill
  5873.       console.log('mtb-btn click:', filter, 'filterContent type:', typeof window.filterContent);
  5874.       if (typeof window.filterContent === 'function') {
  5875.         window.filterContent(filter);
  5876.       } else {
  5877.         console.error('window.filterContent n\'est pas une fonction!');
  5878.       }
  5879.     });
  5881.     // Expose un setter global
  5882.     window.setMediaFilter = (filter) => {
  5883.       // Pour le bouton photos : ne pas modifier les états
  5884.       if (filter !== 'photos') {
  5885.         setActive(filter);
  5886.       }
  5887.       applyFilter(filter);
  5888.     };
  5890.     // 🛡️ PROTECTION ABSOLUE : Empêcher TOUTE interaction directe avec le compteur favoris
  5891.     document.addEventListener('DOMContentLoaded', () => {
  5892.       const mesFavCount = document.getElementById('mesFavCount');
  5893.       if (mesFavCount) {
  5894.         // Bloquer tous les clics directs sur le compteur
  5895.         mesFavCount.addEventListener('click', (e) => {
  5896.           console.log('⚠️ Clic sur mesFavCount bloqué');
  5897.           e.stopPropagation();
  5898.           e.stopImmediatePropagation();
  5899.           e.preventDefault();
  5900.           return false;
  5901.         }, true); // Capture phase pour intercepter avant tout autre listener
  5902.         
  5903.         // Empêcher le double-clic
  5904.         mesFavCount.addEventListener('dblclick', (e) => {
  5905.           console.log('⚠️ Double-clic sur mesFavCount bloqué');
  5906.           e.stopPropagation();
  5907.           e.stopImmediatePropagation();
  5908.           e.preventDefault();
  5909.           return false;
  5910.         }, true);
  5911.         
  5912.         // Ajouter un style pour indiquer visuellement que c'est non-cliquable
  5913.         mesFavCount.style.pointerEvents = 'none';
  5914.         mesFavCount.style.userSelect = 'none';
  5915.         
  5916.         console.log('🛡️ Protection mesFavCount activée - compteur non-cliquable');
  5917.       }
  5918.       
  5919.       // 🎤 Initialiser l'état du bouton audio (griser si 0 message)
  5920.       initAudioButtonState();
  5921.     });
  5923.     // 🎤 Fonction pour afficher le popover "Pas de message audio"
  5924.     function showAudioEmptyPopover(btn) {
  5925.       // Supprimer les popovers existants
  5926.       const existingPopover = document.querySelector('.audio-empty-popover');
  5927.       if (existingPopover) {
  5928.         existingPopover.remove();
  5929.       }
  5930.       
  5931.       // Créer le popover
  5932.       const popover = document.createElement('div');
  5933.       popover.className = 'audio-empty-popover';
  5934.       popover.innerHTML = `
  5935.         <div class="audio-popover-content">
  5936.           <div class="audio-popover-icon">
  5937.             <i class="bi bi-mic-mute-fill"></i>
  5938.           </div>
  5939.           <div class="audio-popover-text">
  5940.             <strong>Aucun message audio</strong>
  5941.             <p>Pas de message audio soumis pour l'instant</p>
  5942.           </div>
  5943.         </div>
  5944.       `;
  5945.       
  5946.       // Positionner le popover
  5947.       document.body.appendChild(popover);
  5948.       
  5949.       const btnRect = btn.getBoundingClientRect();
  5950.       popover.style.position = 'fixed';
  5951.       popover.style.top = `${btnRect.bottom + 10}px`;
  5952.       popover.style.left = `${btnRect.left + (btnRect.width / 2)}px`;
  5953.       popover.style.transform = 'translateX(-50%)';
  5954.       
  5955.       // Animation d'entrée
  5956.       setTimeout(() => popover.classList.add('show'), 10);
  5957.       
  5958.       // Auto-fermeture après 3 secondes
  5959.       setTimeout(() => {
  5960.         popover.classList.remove('show');
  5961.         setTimeout(() => popover.remove(), 300);
  5962.       }, 3000);
  5963.       
  5964.       // Fermer au clic ailleurs
  5965.       const closeOnClick = (e) => {
  5966.         if (!popover.contains(e.target) && !btn.contains(e.target)) {
  5967.           popover.classList.remove('show');
  5968.           setTimeout(() => popover.remove(), 300);
  5969.           document.removeEventListener('click', closeOnClick);
  5970.         }
  5971.       };
  5972.       setTimeout(() => document.addEventListener('click', closeOnClick), 100);
  5973.     }
  5975.     // 🎤 Fonction pour initialiser l'état du bouton audio
  5976.     function initAudioButtonState() {
  5977.       const audioBtn = document.querySelector('.mtb-btn[data-filter="audio"]');
  5978.       if (!audioBtn) return;
  5979.       
  5980.       const audioCount = audioBtn.querySelector('.mtb-count[data-bind="audio"]');
  5981.       if (!audioCount) return;
  5982.       
  5983.       const count = parseInt(audioCount.textContent.trim()) || 0;
  5984.       
  5985.       if (count === 0) {
  5986.         // Masquer le compteur "0"
  5987.         audioCount.style.display = 'none';
  5988.         
  5989.         // Griser l'icône
  5990.         audioBtn.classList.add('disabled-audio');
  5991.         audioBtn.style.opacity = '0.4';
  5992.         audioBtn.style.cursor = 'not-allowed';
  5993.         
  5994.         const icons = audioBtn.querySelectorAll('i');
  5995.         icons.forEach(icon => {
  5996.           icon.style.color = '#999 !important';
  5997.           icon.style.filter = 'grayscale(100%)';
  5998.         });
  5999.         
  6000.         console.log('🎤 Bouton audio désactivé (0 message)');
  6001.       } else {
  6002.         // Afficher le compteur
  6003.         audioCount.style.display = 'inline';
  6004.         
  6005.         // Activer l'icône
  6006.         audioBtn.classList.remove('disabled-audio');
  6007.         audioBtn.style.opacity = '1';
  6008.         audioBtn.style.cursor = 'pointer';
  6009.         
  6010.         console.log(`🎤 Bouton audio activé (${count} message${count > 1 ? 's' : ''})`);
  6011.       }
  6012.     }
  6014.     // 🎤 Observer les changements du compteur audio pour mettre à jour l'état
  6015.     const audioCountObserver = new MutationObserver(() => {
  6016.       initAudioButtonState();
  6017.     });
  6018.     
  6019.     // Démarrer l'observation quand le DOM est prêt
  6020.     if (document.readyState === 'loading') {
  6021.       document.addEventListener('DOMContentLoaded', () => {
  6022.         const audioCount = document.querySelector('.mtb-count[data-bind="audio"]');
  6023.         if (audioCount) {
  6024.           audioCountObserver.observe(audioCount, { 
  6025.             childList: true, 
  6026.             characterData: true, 
  6027.             subtree: true 
  6028.           });
  6029.         }
  6030.       });
  6031.     } else {
  6032.       const audioCount = document.querySelector('.mtb-count[data-bind="audio"]');
  6033.       if (audioCount) {
  6034.         audioCountObserver.observe(audioCount, { 
  6035.           childList: true, 
  6036.           characterData: true, 
  6037.           subtree: true 
  6038.         });
  6039.       }
  6040.     }
  6041.     
  6042.     // Mise à jour des compteurs quand les favoris changent
  6043.     window.addEventListener('favorites:updated', updateCounts);
  6044.     
  6045.     // Initialisation
  6046.     setTimeout(() => {
  6047.       updateCounts();
  6048.       setActive('all');
  6049.     }, 100);
  6051.     // Mise à jour périodique des compteurs (sauf favoris qui reste fixe)
  6052.     setInterval(updateCounts, 2000);
  6053.   })();
  6056.   function navigateToDay(index) {
  6057.      if (index >= 0 && index < collapseSections.length) {
  6058.       // Fermer tous les jours
  6059.       collapseSections.forEach(s => {
  6060.         if (s && s.classList) {
  6061.           s.classList.remove('show');
  6062.         }
  6063.       });
  6064.       dateCards.forEach(c => {
  6065.         if (c && c.classList) {
  6066.           c.classList.remove('active');
  6067.         }
  6068.       });
  6070.       // Ouvrir le bon jour
  6071.       const targetCollapse = collapseSections[index];
  6072.       const targetCard = dateCards[index];
  6074.       if (targetCollapse && targetCard) {
  6075.         if (targetCollapse.classList) {
  6076.           targetCollapse.classList.add('show');
  6077.         }
  6078.         if (targetCard.classList) {
  6079.           targetCard.classList.add('active');
  6080.         }
  6082.       }
  6083.     }
  6084.   }
  6086.   prevButtons.forEach(button => {
  6087.     button.addEventListener('click', function () {
  6088.       const targetIndex = parseInt(this.dataset.target, 10);
  6089.       navigateToDay(targetIndex);
  6090.     });
  6091.   });
  6093.   nextButtons.forEach(button => {
  6094.     button.addEventListener('click', function () {
  6095.       const targetIndex = parseInt(this.dataset.target, 10);
  6096.       navigateToDay(targetIndex);
  6097.     });
  6098.   });
  6099. });
  6100. </script>
  6102.   <script>
  6103.     document.addEventListener('DOMContentLoaded', function() {
  6104.   const style = document.createElement('style');
  6105.   style.textContent = `
  6106.     .hidden {
  6107.       display: none !important;
  6108.     }
  6109.   `;
  6110.   document.head.appendChild(style);
  6111. });
  6112.     document.addEventListener('DOMContentLoaded', function() {
  6113.     // Get the gift button
  6114.     const giftButton = document.querySelector('.gift-button');
  6115.     if (giftButton) {
  6116.       // Keep it clickable for the gift functionality
  6117.       giftButton.style.pointerEvents = 'auto';
  6118.       
  6119.       // Add click handler for gift action
  6120.       giftButton.onclick = function(e) {
  6121.         e.preventDefault();
  6122.         e.stopPropagation();
  6123.         return false;
  6124.       };
  6125.       
  6126.       // Make sure hover still works
  6127.       favoriteButton.addEventListener('mouseover', function() {
  6128.         document.getElementById('purchase-alert').style.display = 'block';
  6129.       });
  6130.       
  6131.       // Keep any existing hover functionality
  6132.       if (typeof showSelection === 'function') {
  6133.         favoriteButton.onmouseover = showSelection;
  6134.       }
  6135.     }
  6136.     
  6137.     // Make sure the purchase alert remains interactive
  6138.     const purchaseAlert = document.getElementById('purchase-alert');
  6139.     if (purchaseAlert) {
  6140.       purchaseAlert.style.pointerEvents = 'auto';
  6141.     }
  6142.   });
  6143.     // Sélection des éléments
  6144.     const purchaseAlert = document.getElementById("purchase-alert");
  6145.     const alertContent = document.getElementById("purchase-alert-content");
  6146.     const likeCountLabel = document.getElementById("likeCount");
  6147.     
  6148.     // Fonction pour obtenir le nombre actuel de favoris
  6149.     function getCurrentFavoriteCount() {
  6150.         const likeCountLabel = document.getElementById("likeCount");
  6151.         return parseInt(likeCountLabel?.textContent.trim(), 10) || 0;
  6152.     }
  6154.     // Fonction pour mettre à jour le contenu de l'alerte
  6155.     function updatePurchaseAlert(current) {
  6156.   let remainingForAlbum = Math.max(0, 20 - current);
  6157.   let remainingForPochette = Math.max(0, 12 - current);
  6158.   let remainingForPack = Math.max(0, 12 - current);
  6160.   const progressBar = (count, total, color) => `
  6161.   <div style="margin: 5px 0;">
  6162.     <div style="background-color: #e9ecef; border-radius: 5px; overflow: hidden; height: 8px;">
  6163.       <div style="width: ${
  6164.         (count / total) * 100
  6165.       }%; background-color: ${color}; height: 100%;"></div>
  6166.     </div>
  6167.     <small style="font-size: 12px;">${count}/${total} photos</small>
  6168.   </div>
  6169. `;
  6171.   // Use Twig paths here:
  6172.   const products = [
  6173.       {
  6174.       name: "Pochette photo (12 photos)",
  6175.       required: 12,
  6176.       remaining: remainingForPochette,
  6177.       image: "/images/produit/PochettePhoto5sur5-2.jpg",
  6178.       color: "#2196f3",
  6179.       link: "{{ path('AjoutPochettePhotos_Favoris', {'nbr': 12}) }}",
  6180.     },
  6181.        {
  6182.       name: "Pack numérique (20 photos)",
  6183.       required: 20,
  6184.       remaining: remainingForAlbum,
  6185.       image: "/images/produit/photoNumerique.jpg",
  6186.       color: "#4caf50",
  6187.       link: "{{ path('PackPhotosNumerique_Favoris', {'nbr': 20}) }}",
  6188.     }
  6189.   
  6190.   
  6191.     
  6192.   ].sort((a, b) => a.remaining - b.remaining);
  6194.   const productList = products
  6195.     .map((product) => {
  6196.       const count = current;
  6197.       const total = product.required;
  6198.       const remaining = product.remaining;
  6200.       return `
  6201.     <li style="margin-bottom: 15px;">
  6202.       <div style="display: flex; align-items: center; gap: 10px;">
  6203.         <img
  6204.           src="${product.image}"
  6205.           alt="${product.name}"
  6206.           style="width: 65px; height: 65px; border-radius: 5px; margin-top:-19px"
  6207.         />
  6208.         <div style="flex: 1;">
  6209.           <strong style="font-size: 14px;">${product.name}</strong>
  6210.           ${progressBar(count, total, product.color)}
  6211.           ${
  6212.             remaining > 0
  6213.               ? `<small style="color: ${product.color}; font-size: 12px;">
  6214.                    Encore ${remaining} photos ❤️ pour compléter ${product.name.toLowerCase()}
  6215.                  </small>`
  6216.               : `<button
  6217.                   style="
  6218.                     margin-top: 5px;
  6219.                     padding: 5px 8px;
  6220.                     background-color: ${product.color};
  6221.                     color: white;
  6222.                     border: none;
  6223.                     border-radius: 5px;
  6224.                     font-size: 12px;
  6225.                     cursor: pointer;
  6226.                   "
  6227.                   onclick="window.location.href='${product.link}'"
  6228.                 >
  6229.                   Commander
  6230.                 </button>`
  6231.           }
  6232.         </div>
  6233.       </div>
  6234.     </li>
  6235.   `;
  6236.     })
  6237.     .join("");
  6239.   const plusButton = `
  6240.     <li style="margin-bottom: 15px; text-align: center;">
  6241.       <button
  6242.         style="
  6243.           padding: 5px 8px;
  6244.           background-color: #F56040;
  6245.           color: white;
  6246.           border: none;
  6247.           border-radius: 5px;
  6248.           font-size: 14px;
  6249.           line-height: 1;
  6250.           width: 150px;
  6251.           height: 40px;
  6252.           cursor: pointer;
  6253.         "
  6254.         onclick="window.location.href='{{ path('boutique5sur5') }}'"
  6255.       >
  6256.         Aller à la boutique
  6257.       </button>
  6258.     </li>
  6259.   `;
  6261.   if (current === 0) {
  6262.     alertContent.innerHTML = `
  6263.     <p style="font-size: 16px; font-weight: bold; color: #333;">
  6264.       Vous n'avez pas encore de photos favorites !
  6265.     </p>
  6266.     <p style="margin-bottom: 20px; color: #555;">
  6267.       Commencez à ajouter vos moments préférés pour profiter de nos offres.
  6268.     </p>
  6269.     <ul style="list-style-type: none; padding: 0;">${productList}${plusButton}</ul>
  6270.   `;
  6271.   } else {
  6272.     alertContent.innerHTML = `
  6273.     <p style="font-size: 16px; font-weight: bold; color: #333;">
  6274.       Vous avez atteint ${current} photos favorites !
  6275.     </p>
  6276.     <p style="margin-bottom: 20px; color: #555;">
  6277.       Profitez de nos offres spéciales :
  6278.     </p>
  6279.     <ul style="list-style-type: none; padding: 0;">${productList}${plusButton}</ul>
  6280.   `;
  6281.   }
  6283.   if (purchaseAlert && purchaseAlert.classList) {
  6284.     purchaseAlert.classList.remove("hidden");
  6285.   }
  6286.   clearTimeout(window.purchaseAlertTimeout);
  6287.   window.purchaseAlertTimeout = setTimeout(() => {
  6288.     if (!purchaseAlert.matches(":hover")) {
  6289.       closePurchaseAlert();
  6290.     }
  6291.   }, 5000);
  6292. }
  6294.     // Fonction pour fermer l'alerte
  6295.     function closePurchaseAlert() {
  6296.       if (purchaseAlert && purchaseAlert.classList) {
  6297.         purchaseAlert.classList.add("hidden");
  6298.       }
  6299.     }
  6301.     // Événement pour mettre à jour le contenu et afficher la popover dynamiquement au hover
  6302.     document.querySelector(".gift-button").addEventListener("mouseover", () => {
  6303.       const currentCount = getCurrentFavoriteCount();
  6304.       updatePurchaseAlert(currentCount);
  6305.       if (purchaseAlert && purchaseAlert.classList) {
  6306.         purchaseAlert.classList.remove("cachee"); // Réaffiche la popover
  6307.       }
  6308.     });
  6310.     // Nouvelles fonctions pour le bouton cadeau
  6311.     function showGiftMessage() {
  6312.       const tooltip = document.getElementById("giftTooltip");
  6313.       if (tooltip) {
  6314.         if (tooltip && tooltip.classList) {
  6315.           tooltip.classList.add("show");
  6316.         }
  6317.       }
  6318.     }
  6320.     function hideGiftMessage() {
  6321.       const tooltip = document.getElementById("giftTooltip");
  6322.       if (tooltip) {
  6323.         if (tooltip && tooltip.classList) {
  6324.           tooltip.classList.remove("show");
  6325.         }
  6326.       }
  6327.     }
  6329.     function showSelection() {
  6330.       document.getElementById("purchase-alert").style.display = "block";
  6331.     }
  6333.     function hideSelection() {
  6334.       document.getElementById("selectionPopover").style.display = "none";
  6335.     }
  6336.     document.addEventListener("DOMContentLoaded", function () {
  6337.       const container = document.querySelector(".date-container");
  6339.       // Vérifie si le conteneur existe pour éviter les erreurs
  6340.       if (container) {
  6341.         container.scrollTo({
  6342.           left: container.scrollWidth, // Scroll directement à la position maximale
  6343.           behavior: "smooth", // Défilement fluide
  6344.         });
  6345.       }
  6346.     });
  6348.     document.addEventListener("DOMContentLoaded", function () {
  6349.       const container = document.querySelector(".date-container");
  6350.       const leftArrow = document.querySelector(".scroll-btn.left");
  6351.       const rightArrow = document.querySelector(".scroll-btn.right");
  6353.       // Fonction pour vérifier le débordement et activer/désactiver les flèches
  6354.       function updateArrowsVisibility() {
  6355.         const isOverflowing = container.scrollWidth > container.clientWidth; // Vérifie si débordement
  6356.         leftArrow.style.display = isOverflowing ? "flex" : "none";
  6357.         rightArrow.style.display = isOverflowing ? "flex" : "none";
  6358.       }
  6360.       // Fonction pour défiler
  6361.       function scrollContainer(direction) {
  6362.         container.scrollBy({
  6363.           left: direction === "left" ? -200 : 200, // Défiler à gauche ou à droite
  6364.           behavior: "smooth",
  6365.         });
  6366.       }
  6368.       // Ajout des événements de clic pour les flèches
  6369.       leftArrow.addEventListener("click", () => scrollContainer("left"));
  6370.       rightArrow.addEventListener("click", () => scrollContainer("right"));
  6372.       // ⚡ OPTIMISÉ: Debounce resize pour éviter surcharge
  6373.       let resizeTimeout;
  6374.       const debouncedResize = () => {
  6375.         clearTimeout(resizeTimeout);
  6376.         resizeTimeout = setTimeout(updateArrowsVisibility, 150);
  6377.       };
  6378.       
  6379.       updateArrowsVisibility();
  6380.       window.addEventListener("resize", debouncedResize, { passive: true });
  6381.     });
  6383.     document.addEventListener("DOMContentLoaded", function () {
  6384.       const container = document.querySelector(".date-container");
  6385.       const leftBtn = document.querySelector(".scroll-btn.left");
  6386.       const rightBtn = document.querySelector(".scroll-btn.right");
  6388.       leftBtn.addEventListener("click", () => {
  6389.         container.scrollBy({
  6390.           left: -200, // Défile vers la gauche
  6391.           behavior: "smooth",
  6392.         });
  6393.       });
  6395.       rightBtn.addEventListener("click", () => {
  6396.         container.scrollBy({
  6397.           left: 200, // Défile vers la droite
  6398.           behavior: "smooth",
  6399.         });
  6400.       });
  6401.     });
  6403.  document.addEventListener("DOMContentLoaded", function () {
  6404.     // Sélectionnez tous les badges de filtre
  6405.     const filterBadges = document.querySelectorAll(".filter-badge");
  6406.     // Sélectionnez tous les éléments de la galerie
  6407.     const galleryItems = document.querySelectorAll(".column");
  6408.     // Sélectionnez tous les jours
  6409.     const days = document.querySelectorAll(".collapse");
  6411.     // Fonction pour réinitialiser les filtres
  6412.     function resetFilters() {
  6413.         // Réinitialisez tous les éléments de la galerie
  6414.         galleryItems.forEach((item) => {
  6415.             item.style.display = "block";
  6416.         });
  6418.         // Réinitialisez les états des badges
  6419.         filterBadges.forEach((badge) => {
  6420.           if (badge && badge.classList) {
  6421.             badge.classList.remove("active");
  6422.           }
  6423.         });
  6424.     }
  6426.     // Ajoutez un gestionnaire d'événements pour chaque badge
  6427.     filterBadges.forEach((badge) => {
  6428.         badge.addEventListener("click", function () {
  6429.             const filter = this.getAttribute("data-filter");
  6431.             // Réinitialisez l'état actif pour tous les badges
  6432.             filterBadges.forEach((btn) => {
  6433.               if (btn && btn.classList) {
  6434.                 btn.classList.remove("active");
  6435.               }
  6436.             });
  6437.             // Ajoutez l'état actif au badge cliqué
  6438.             if (this && this.classList) {
  6439.               this.classList.add("active");
  6440.             }
  6442.             // Affichez ou masquez les éléments de la galerie
  6443.             galleryItems.forEach((item) => {
  6444.                 if (filter === "all") {
  6445.                     item.style.display = "block";
  6446.                 } else if (filter === "photo" && item.querySelector("img")) {
  6447.                     item.style.display = "block";
  6448.                 } else if (filter === "video" && item.querySelector("video")) {
  6449.                     item.style.display = "block";
  6450.                 } else if (filter === "audio" && item.classList && item.classList.contains("audio-message-item")) {
  6451.                     item.style.display = "block";
  6452.                 } else {
  6453.                     item.style.display = "none";
  6454.                 }
  6455.             });
  6456.         });
  6457.     });
  6459.     // Réinitialiser les filtres lors du changement de jour
  6460.     days.forEach((day) => {
  6461.         day.addEventListener("show.bs.collapse", function () {
  6462.             resetFilters();
  6463.         });
  6464.     });
  6465. });
  6466.     $(document).ready(function () {
  6467.       let zoomCounter = 0; // Initialize zoom counter
  6468.       let currentImageSrc = ""; // Track current image source
  6469.       let lastClickPosition = { x: 50, y: 50 }; // Default to center of image
  6471.       $(".container--gallery").magnificPopup({
  6472.         delegate: "a",
  6473.         type: "image",
  6474.         mainClass: "mfp-with-zoom mfp-img-mobile",
  6475.         image: {
  6476.           verticalFit: true,
  6477.         },
  6478.         gallery: {
  6479.           enabled: true,
  6480.           tPrev: "Previous (Left arrow key)", // Alt text on left arrow
  6481.           tNext: "Next (Right arrow key)", // Alt text on right arrow
  6482.           tCounter: "%curr% of %total%", // Markup for "1 of 7" counter
  6483.         },
  6484.         zoom: {
  6485.           enabled: true,
  6486.           duration: 300,
  6487.           opener: function (element) {
  6488.             return element.find("img");
  6489.           },
  6490.         },
  6491.         callbacks: {
  6492.           open: function () {
  6493.             // Get current image data from the link that was clicked
  6494.             const currentLink = this.currItem.el;
  6495.             const imageId =
  6496.               currentLink
  6497.                 .closest(".photo-zoom")
  6498.                 .find(".heart-icon")
  6499.                 .data("id") || "";
  6500.             const sejourId =
  6501.               currentLink
  6502.                 .closest(".photo-zoom")
  6503.                 .find(".heart-icon")
  6504.                 .data("sejour-id") || "";
  6505.             const imagePath =
  6506.               currentLink
  6507.                 .closest(".photo-zoom")
  6508.                 .find(".heart-icon")
  6509.                 .data("path") || "";
  6510.             const imageDesc =
  6511.               currentLink
  6512.                 .closest(".photo-zoom")
  6513.                 .find(".heart-icon")
  6514.                 .data("description") || "";
  6515.             const isFavorite = currentLink
  6516.               .closest(".photo-zoom")
  6517.               .find(".heart-icon i")
  6518.               .hasClass("bi-heart-fill");
  6520.             const favoriteIconClass = isFavorite ? "bi-heart-fill" : "bi-heart";
  6521.             const favoriteIconColor = isFavorite ? "#f56040" : "white";
  6522.             const favoriteTooltip = isFavorite
  6523.               ? "Retirer des favoris"
  6524.               : "Ajouter aux favoris";
  6526.             const zoomControls = `
  6527.           <div class="mfp-zoom-controls">
  6528.             <button class="zoom-btn zoom-out" title="Zoom Out"><i class="fa fa-search-minus"></i></button>
  6529.             <button class="zoom-btn zoom-in" title="Zoom In"><i class="fa fa-search-plus"></i></button>
  6530.           </div>
  6531.           <div class="mfp-favorite">
  6532.             <button class="favorite-btn" 
  6533.                     data-id="${imageId}" 
  6534.                     data-sejour-id="${sejourId}" 
  6535.                     data-path="${imagePath}" 
  6536.                     data-description="${imageDesc}"
  6537.                     title="${favoriteTooltip}">
  6538.               <i class="bi ${favoriteIconClass}" style="color: ${favoriteIconColor}; text-shadow: 0px 0px 3px rgba(0,0,0,0.5);"></i>
  6539.             </button>
  6540.           </div>
  6541.           <div class="mfp-counter"></div>
  6542.         `;
  6544.             $(".mfp-content").append(zoomControls);
  6546.             initializeZoomControls();
  6547.             initializeFavoriteButton();
  6549.             const intervalId = setInterval(() => {
  6550.               const newImageSrc = $(".mfp-img").attr("src");
  6551.               if (newImageSrc !== currentImageSrc) {
  6552.                 currentImageSrc = newImageSrc;
  6553.                 zoomCounter = 0;
  6554.                 lastClickPosition = { x: 50, y: 50 }; // Reset to center
  6555.                 attachZoomHandler(); // Reattach zoom handler to new image
  6556.                 $(".mfp-img").css({
  6557.                   "transform-origin": `${lastClickPosition.x}% ${lastClickPosition.y}%`,
  6558.                   transform: `scale(1)`,
  6559.                 });
  6561.                 // Update favorite button for the new image
  6562.                 updateFavoriteButton();
  6564.                 initializeZoomControls();
  6565.                 updateCounter();
  6566.               }
  6567.             }, 100);
  6569.             this.content.on("mfpClose", function () {
  6570.               clearInterval(intervalId);
  6571.             });
  6573.             attachZoomHandler();
  6574.           },
  6575.           close: function () {
  6576.             $(".mfp-zoom-controls").remove();
  6577.             $(".mfp-favorite").remove();
  6578.             $(".mfp-counter").remove();
  6579.             zoomCounter = 0;
  6580.           },
  6581.         },
  6582.       });
  6584.       function attachZoomHandler() {
  6585.         $(".mfp-img")
  6586.           .off("click")
  6587.           .on("click", function (event) {
  6588.             event.stopPropagation(); // Prevent default navigation behavior
  6590.             // Calculate click coordinates relative to the image
  6591.             const imgOffset = $(this).offset();
  6592.             const clickX = event.pageX - imgOffset.left;
  6593.             const clickY = event.pageY - imgOffset.top;
  6594.             const imgWidth = $(this).width();
  6595.             const imgHeight = $(this).height();
  6597.             // Calculate transform-origin based on click position
  6598.             lastClickPosition = {
  6599.               x: (clickX / imgWidth) * 100,
  6600.               y: (clickY / imgHeight) * 100,
  6601.             };
  6603.             // Cycle through zoom levels: 1x, 1.5x, 2x
  6604.             zoomCounter = (zoomCounter + 1) % 3;
  6605.             const zoomLevels = [1, 1.5, 2];
  6606.             const zoomLevel = zoomLevels[zoomCounter];
  6608.             $(this).css({
  6609.               "transform-origin": `${lastClickPosition.x}% ${lastClickPosition.y}%`,
  6610.               transform: `scale(${zoomLevel})`,
  6611.             });
  6613.             updateZoomButtonState();
  6614.           });
  6615.       }
  6617.       function initializeZoomControls() {
  6618.         $(".mfp-zoom-controls .zoom-in")
  6619.           .off("click")
  6620.           .on("click", function (event) {
  6621.             event.stopPropagation();
  6622.             zoomCounter = (zoomCounter + 1) % 3;
  6623.             const zoomLevels = [1, 1.5, 2];
  6624.             const zoomLevel = zoomLevels[zoomCounter];
  6625.             $(".mfp-img").css({
  6626.               "transform-origin": `${lastClickPosition.x}% ${lastClickPosition.y}%`,
  6627.               transform: `scale(${zoomLevel})`,
  6628.             });
  6629.             updateZoomButtonState();
  6630.           });
  6632.         $(".mfp-zoom-controls .zoom-out")
  6633.           .off("click")
  6634.           .on("click", function (event) {
  6635.             event.stopPropagation();
  6636.             if (zoomCounter > 0) {
  6637.               zoomCounter -= 1;
  6638.               const zoomLevels = [1, 1.5, 2];
  6639.               const zoomLevel = zoomLevels[zoomCounter];
  6640.               $(".mfp-img").css({
  6641.                 "transform-origin": `${lastClickPosition.x}% ${lastClickPosition.y}%`,
  6642.                 transform: `scale(${zoomLevel})`,
  6643.               });
  6644.               updateZoomButtonState();
  6645.             } else {
  6646.               $.magnificPopup.close();
  6647.             }
  6648.           });
  6649.       }
  6651.       function initializeFavoriteButton() {
  6652.         $(".mfp-favorite .favorite-btn")
  6653.           .off("click")
  6654.           .on("click", function (event) {
  6655.             event.stopPropagation();
  6657.             const $this = $(this);
  6658.             const imageId = $this.data("id");
  6659.             const sejourId = $this.data("sejour-id");
  6661.             // Toggle favorite status
  6662.             const isFavorite = $this.find("i").hasClass("bi-heart-fill");
  6664.             // Update the button appearance
  6665.             if (isFavorite) {
  6666.               $this
  6667.                 .find("i")
  6668.                 .removeClass("bi-heart-fill")
  6669.                 .addClass("bi-heart")
  6670.                 .css("color", "white");
  6671.               $this.attr("title", "Ajouter aux favoris");
  6672.             } else {
  6673.               $this
  6674.                 .find("i")
  6675.                 .removeClass("bi-heart")
  6676.                 .addClass("bi-heart-fill")
  6677.                 .css("color", "#f56040");
  6678.               $this.attr("title", "Retirer des favoris");
  6679.             }
  6681.             // Update the original heart icon in the gallery
  6682.             const originalHeartIcon = $(
  6683.               `.heart-icon[data-id="${imageId}"]`
  6684.             ).find("i");
  6685.             if (isFavorite) {
  6686.               originalHeartIcon
  6687.                 .removeClass("bi-heart-fill")
  6688.                 .addClass("bi-heart")
  6689.                 .css("color", "");
  6690.             } else {
  6691.               originalHeartIcon
  6692.                 .removeClass("bi-heart")
  6693.                 .addClass("bi-heart-fill")
  6694.                 .css("color", "#f56040");
  6695.             }
  6697.             // Make AJAX call to update favorite status in the backend using Parent routes
  6698.             $.ajax({
  6699.               url: isFavorite ? "/Parent/aSupprimerFav" : "/Parent/ajouterFav",
  6700.               type: "POST",
  6701.               data: {
  6702.                 id: imageId,
  6703.                 idSejour: sejourId,
  6704.               },
  6705.               success: function (response) {
  6706.                 // Optional: Show a success message or handle response
  6707.                 console.log("Favorite status updated", response);
  6708.               },
  6709.               error: function (error) {
  6710.                 console.error("Error updating favorite status", error);
  6711.                 // Revert the icon change on error
  6712.                 if (isFavorite) {
  6713.                   $this
  6714.                     .find("i")
  6715.                     .removeClass("bi-heart")
  6716.                     .addClass("bi-heart-fill")
  6717.                     .css("color", "#f56040");
  6718.                   originalHeartIcon
  6719.                     .removeClass("bi-heart")
  6720.                     .addClass("bi-heart-fill")
  6721.                     .css("color", "#f56040");
  6722.                 } else {
  6723.                   $this
  6724.                     .find("i")
  6725.                     .removeClass("bi-heart-fill")
  6726.                     .addClass("bi-heart")
  6727.                     .css("color", "white");
  6728.                   originalHeartIcon
  6729.                     .removeClass("bi-heart-fill")
  6730.                     .addClass("bi-heart")
  6731.                     .css("color", "");
  6732.                 }
  6733.               },
  6734.             });
  6735.           });
  6736.       }
  6738.       function updateFavoriteButton() {
  6739.         // Get current image data from the current slide
  6740.         const currentSlide = $.magnificPopup.instance.currItem.el;
  6741.         const photoZoom = currentSlide.closest(".photo-zoom");
  6743.         if (photoZoom.length) {
  6744.           const heartIcon = photoZoom.find(".heart-icon");
  6745.           const imageId = heartIcon.data("id") || "";
  6746.           const sejourId = heartIcon.data("sejour-id") || "";
  6747.           const imagePath = heartIcon.data("path") || "";
  6748.           const imageDesc = heartIcon.data("description") || "";
  6749.           const isFavorite = heartIcon.find("i").hasClass("bi-heart-fill");
  6751.           const favoriteIconClass = isFavorite ? "bi-heart-fill" : "bi-heart";
  6752.           const favoriteIconColor = isFavorite ? "#f56040" : "white";
  6753.           const favoriteTooltip = isFavorite
  6754.             ? "Retirer des favoris"
  6755.             : "Ajouter aux favoris";
  6757.           // Update the favorite button
  6758.           const $favoriteBtn = $(".mfp-favorite .favorite-btn");
  6759.           $favoriteBtn.data("id", imageId);
  6760.           $favoriteBtn.data("sejour-id", sejourId);
  6761.           $favoriteBtn.data("path", imagePath);
  6762.           $favoriteBtn.data("description", imageDesc);
  6763.           $favoriteBtn.attr("title", favoriteTooltip);
  6764.           $favoriteBtn
  6765.             .find("i")
  6766.             .removeClass("bi-heart bi-heart-fill")
  6767.             .addClass(favoriteIconClass)
  6768.             .css("color", favoriteIconColor);
  6769.         }
  6770.       }
  6772.       function updateZoomButtonState() {
  6773.         const zoomLevels = [1, 1.5, 2];
  6774.         const currentZoom = zoomLevels[zoomCounter];
  6775.         $(".zoom-in").prop("disabled", currentZoom === 2);
  6776.         $(".zoom-out").prop("disabled", currentZoom === 1);
  6777.       }
  6779.       function updateCounter() {
  6780.         const counterText = $(".mfp-counter")
  6781.           .closest(".mfp-content")
  6782.           .find(".mfp-counter")
  6783.           .text();
  6784.         const matches = counterText.match(/(\d+) of (\d+)/);
  6785.         if (matches) {
  6786.           const currentIndex = matches[1];
  6787.           const totalImages = matches[2];
  6788.           $(".mfp-counter").text(`${currentIndex} of ${totalImages}`);
  6789.         }
  6790.       }
  6792.       // Add CSS for the favorite button and rounded image corners
  6793.       $("<style>")
  6794.         .prop("type", "text/css")
  6795.         .html(
  6796.           `
  6797.       .mfp-favorite {
  6798.         position: absolute;
  6799.         top: 15px;
  6800.         left: 15px;
  6801.         z-index: 1046;
  6802.       }
  6803.       .favorite-btn {
  6804.         background: transparent;
  6805.         border: none;
  6806.         font-size: 24px;
  6807.         padding: 5px;
  6808.         cursor: pointer;
  6809.         outline: none;
  6810.       }
  6811.       .favorite-btn i {
  6812.         transition: all 0.3s ease;
  6813.       }
  6814.       .favorite-btn:hover i {
  6815.         transform: scale(1.2);
  6816.       }
  6817.       /* Rounded corners for zoomed images */
  6818.       .mfp-img {
  6819.         border-radius: 8px;
  6820.       }
  6821.       /* Make sure the container doesn't clip the rounded corners */
  6822.       .mfp-figure:after {
  6823.         border-radius: 8px;
  6824.       }
  6825.     `
  6826.         )
  6827.         .appendTo("head");
  6828.     });
  6829.   </script>
  6830. <script>
  6831. document.addEventListener('DOMContentLoaded', function () {
  6832.   const openBtn = document.getElementById('openFavoritesBtn');
  6833.   const closeBtn = document.getElementById('closeSidebarBtn');
  6834.   const sidebar = document.getElementById('favoritesSidebar');
  6835.   const tbody = document.querySelector('#favoritesTable tbody');
  6837.   openBtn.addEventListener('click', async () => {
  6838.     try {
  6839.       const response = await fetch('/Parent/mes-favoris', {
  6840.         headers: {
  6841.           'Accept': 'application/json'
  6842.         }
  6843.       });
  6845.       const result = await response.json();
  6847.       if (!result.success || !Array.isArray(result.data)) {
  6848.         alert('Erreur lors du chargement des favoris.');
  6849.         return;
  6850.       }
  6852.       tbody.innerHTML = '';
  6854.       result.data.forEach((fav, index) => {
  6855.         const row = document.createElement('tr');
  6856.         row.innerHTML = `
  6857.           <td>${index + 1}</td>
  6858.           <td><img src="${fav.path}" alt="favori"></td>
  6859.           <td>${fav.descreption || '—'}</td>
  6860.           <td>${fav.created_at}</td>
  6861.         `;
  6862.         tbody.appendChild(row);
  6863.       });
  6865.       sidebar.classList.add('active');
  6866.     } catch (e) {
  6867.       console.error('Erreur réseau:', e);
  6868.       alert('Impossible de charger les favoris.');
  6869.     }
  6870.   });
  6872.   closeBtn.addEventListener('click', () => {
  6873.     sidebar.classList.remove('active');
  6874.   });
  6875. });
  6876. </script>
  6878.   <script>
  6882.         // Fonction pour vérifier et afficher l'alerte
  6883.         function checkFavoritesAlert() {
  6884.             const currentCount = window.favoriteCount || 0;
  6885.             if (currentCount >= 10) {
  6886.                 const purchaseAlert = document.getElementById('purchase-alert');
  6887.                 if (purchaseAlert) {
  6888.                     purchaseAlert.style.display = 'block'; // Affiche l'alerte
  6889.                 }
  6890.             } else {
  6891.                 purchaseAlert.style.display = 'none'; // Cache l'alerte si le nombre est réduit
  6892.             }
  6893.         }
  6895.     
  6897.         
  6898.         document.addEventListener('DOMContentLoaded', () => {
  6899.     const favoriteCount = {{ nblikes }};
  6900.     updateCardContent(favoriteCount);
  6901. });
  6903. function updateCardContent(favoriteCount) {
  6904.     const card = document.getElementById('dynamic-card');
  6905.     const cardContent = document.getElementById('dynamic-card-content');
  6907.     let produits = [];
  6909.     if (favoriteCount >= 20) {
  6910.         produits.push({
  6911.             titre: "Album débloqué !",
  6912.             bouton: "Commander",
  6913.             image: "/images/produit/Album5sur5-3.jpg",
  6914.             lien: "{{ path('EditionAlbum') }}"
  6915.         });
  6916.     }
  6917.     if (favoriteCount >= 12) {
  6918.         produits.push({
  6919.             titre: "Pochette débloquée !",
  6920.             bouton: "Commander",
  6921.             image: "/images/produit/PochettePhoto5sur5-2.jpg",
  6922.             lien: "{{ path('AjoutPochettePhotos_Favoris', {'nbr': 12}) }}"
  6923.         });
  6924.     }
  6925.     if (favoriteCount >= 5) {
  6926.         produits.push({
  6927.             titre: "Pack numérique débloqué !",
  6928.             bouton: "Commander",
  6929.             image: "/images/produit/photoNumerique.jpg",
  6930.             lien: "{{ path('PackPhotosNumerique_Favoris', {'nbr': 15}) }}"
  6931.         });
  6932.     }
  6934. if (produits.length === 0) {
  6935.   cardContent.innerHTML = `
  6936.     <div style="position: relative; width: 100%; height: 140px; border-radius: 15px; overflow: hidden; box-shadow: 0 4px 10px rgba(0,0,0,0.1);">
  6937.       <div style="background-image: url('/images/produit/CoffretCadeau5sur5-2.jpg'); background-size: cover; background-position: center; width: 100%; height: 100%;">
  6938.         <div style="position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0, 0, 0, 0.45); display: flex; align-items: center; justify-content: center; padding: 10px;">
  6939.           <div style="
  6940.     margin-top: 35px;
  6941.     color: white;
  6942.     font-size: 15px;
  6943.     font-weight: bold;
  6944.     text-align: center;
  6945.     line-height: 1;
  6946.     text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8);">
  6947.             Ajoutez des favoris ❤️<br><span style="font-size: 16px; font-weight: normal;">pour débloquer un souvenir à offrir 🎁</span>
  6948.           </div>
  6949.         </div>
  6950.       </div>
  6951.     </div>
  6952.   `;
  6953.         return;
  6954.     }
  6956.     cardContent.innerHTML = `
  6957.     <div class="splide" id="dynamicSplide">
  6958.       <div class="splide__track">
  6959.         <ul class="splide__list">
  6960.           ${produits.map(produit => `
  6961.             <li class="splide__slide" style="position: relative;">
  6962.               <img src="${produit.image}" alt="${produit.titre}" style="width: 100%; height: 150px; object-fit: cover; border-radius: 8px;">
  6963.               <div style="position: absolute; bottom: 0; left: 0; right: 0; background: rgba(0,0,0,0.1); color: white; padding: 10px; text-align: center; border-bottom-left-radius: 8px; border-bottom-right-radius: 8px;">
  6964.                 <div style="font-weight: bold; font-size: 14px;">${produit.titre}</div>
  6965.                 <button style="margin-top: 5px; padding: 5px 8px; background-color: #F56040; color: white; border: none; border-radius: 4px; font-size: 12px; cursor: pointer;" onclick="window.location.href='${produit.lien}'">
  6966.                   ${produit.bouton}
  6967.                 </button>
  6968.               </div>
  6969.             </li>
  6970.           `).join('')}
  6971.         </ul>
  6972.       </div>
  6973.     </div>
  6974.     `;
  6976.     // Monte le carrousel
  6977.     new Splide('#dynamicSplide', {
  6978.         type: 'loop',
  6979.         arrows: true,
  6980.         pagination: false,
  6981.         autoplay: true,
  6982.         interval: 4000,
  6983.         speed: 800,
  6984.     }).mount();
  6985. }
  6988.         // Fonction helper pour lire le compteur de favoris (gère les badges premium)
  6989.         function getFavorisCount() {
  6990.             const mesFavCount = document.getElementById('mesFavCount');
  6991.             if (!mesFavCount) return 0;
  6992.             
  6993.             const badge = mesFavCount.querySelector('.premium-5sur5-badge');
  6994.             if (badge) {
  6995.                 return parseInt(badge.textContent.trim() || '0');
  6996.             }
  6997.             
  6998.             const countText = mesFavCount.textContent.trim();
  6999.             if (countText === 'Pas de favoris' || countText.includes('Pas de favoris')) {
  7000.                 return 0;
  7001.             }
  7002.             
  7003.             return parseInt(countText || '0');
  7004.         }
  7006.         // Fonction helper pour mettre à jour l'affichage du compteur de favoris
  7007.         function updateFavorisDisplay(count) {
  7008.             const mesFavCount = document.getElementById('mesFavCount');
  7009.             const favorisBtn = document.querySelector('.mtb-btn[data-filter="favoris"]');
  7010.             const favorisIcon = favorisBtn?.querySelector('i.bi-heart-fill');
  7011.             
  7012.             if (!mesFavCount || !favorisBtn) return;
  7013.             
  7014.             if (count === 0) {
  7015.                 // Afficher "Pas de favoris" au lieu de "0" avec style premium
  7016.                 mesFavCount.innerHTML = '<span class="favoris-empty-text" style="color: #94a3b8; font-style: italic; font-size: 11px;">Pas de favoris</span>';
  7017.                 favorisBtn.classList.add('favoris-empty');
  7018.                 favorisBtn.disabled = true;
  7019.                 favorisBtn.title = "Pas de favoris pour l'instant";
  7020.                 if (favorisIcon) {
  7021.                     favorisIcon.style.color = '#cbd5e1';
  7022.                 }
  7023.             } else {
  7024.                 // Afficher le badge premium avec le nombre
  7025.                 mesFavCount.innerHTML = `<span class="premium-5sur5-badge" style="background: rgba(245, 96, 64, 0.1); color: #F56040; font-size: 10px; padding: 2px 6px;">${count}</span>`;
  7026.                 favorisBtn.classList.remove('favoris-empty');
  7027.                 favorisBtn.disabled = false;
  7028.                 favorisBtn.title = "Mes favoris";
  7029.                 if (favorisIcon) {
  7030.                     favorisIcon.style.color = '#f56040';
  7031.                 }
  7032.             }
  7033.         }
  7035.         function supprimerFavoris($id, $idSejour) {
  7036.             // 🚨 LOG CRITIQUE : Tracer TOUS les appels à supprimerFavoris
  7037.             console.error('🚨🚨🚨 supprimerFavoris() APPELÉ ! 🚨🚨🚨', {
  7038.                 id: $id,
  7039.                 idSejour: $idSejour,
  7040.                 stack: new Error().stack,
  7041.                 mesFavCountAvant: document.getElementById('mesFavCount')?.textContent
  7042.             });
  7043.             
  7044.             // Vider l'élément coeur pour ce favori
  7045.             const coeurElement = $('#coeur' + $id);
  7046.             coeurElement.empty();
  7048.             // Ajout d'une animation sur le bouton cadeau
  7049.             const giftButton = document.querySelector('.gift-button');
  7050.             if (giftButton) {
  7051.                 giftButton.classList.add('active');
  7052.                 // Retirer l'animation après qu'elle soit jouée
  7053.                 setTimeout(() => {
  7054.                     giftButton.classList.remove('active');
  7055.                 }, 600); // La durée doit correspondre à celle de l'animation
  7056.             }
  7058.             // Mise à jour de l'icône coeur
  7059.             const clas = $('.IconImag6').hasClass('active') ? "IconDelete IconDeletesix" : "IconDelete";
  7060.             coeurElement.html(
  7061.                 `<i class="bi bi-heart ${clas}" ></i>`
  7062.             );
  7064.             // METTRE À JOUR UNIQUEMENT #mesFavCount (source unique de vérité)
  7065.             // L'observer se chargera de synchroniser giftCount automatiquement
  7066.             const mesFavCount = document.getElementById('mesFavCount');
  7067.             if (mesFavCount) {
  7068.                 let currentCount = getFavorisCount();
  7069.                 currentCount = Math.max(0, currentCount - 1); // Empêche d'aller en dessous de 0
  7070.                 updateFavorisDisplay(currentCount);
  7071.                 console.log('[supprimerFavoris] ✅ mesFavCount décrémenté:', currentCount);
  7072.                 
  7073.                 // L'observer MutationObserver va automatiquement :
  7074.                 // - Synchroniser giftCount
  7075.                 // - Mettre à jour le sidebar
  7076.                 // - Mettre à jour product-suggestions
  7077.             }
  7079.             // Préparation des données pour l'Ajax
  7080.             const $_data = { 'id': $id, 'idSejour': $idSejour };
  7082.             // Appel Ajax pour supprimer le favori
  7083.             $.ajax({
  7084.                 type: "POST",
  7085.                 url: "{{ path('Supprimer_fav') }}",
  7086.                 data: $_data,
  7087.                 success: function () {
  7088.                     // Réactiver les icônes après succès
  7089.                     $('.IconDelete').each(function () {
  7090.                         $(this).css('pointer-events', '');
  7091.                     });
  7092.                     
  7093.                     // Mettre à jour l'alerte avec le nouveau nombre
  7094.                     const finalCount = getCurrentFavoriteCount();
  7095.                     if (typeof updatePurchaseAlert === 'function') {
  7096.                         updatePurchaseAlert(finalCount);
  7097.                     }
  7098.                 },
  7099.                 error: function (xhr, status, error) {
  7100.                     console.error('Erreur lors de la suppression du favori :', error);
  7101.                 }
  7102.             });
  7103.         }
  7105.         function AddFavoris($id, $idSejour, $urlimg, $description) {
  7106.             // 🟢 LOG : Tracer les ajouts de favoris
  7107.             console.log('🟢 AddFavoris() APPELÉ', {
  7108.                 id: $id,
  7109.                 idSejour: $idSejour,
  7110.                 mesFavCountAvant: document.getElementById('mesFavCount')?.textContent
  7111.             });
  7112.             
  7113.             // Update heart icon
  7114.             $('#coeur' + $id).empty();
  7115.             var clas = $('.IconImag6').hasClass('active') ? "IconDelete IconDeletesix" : "IconDelete";
  7116.             $('#coeur' + $id).html("<i class=\"bi bi-heart-fill favSelect " + clas + "\" )\"></i>");
  7117.             
  7118.             // METTRE À JOUR UNIQUEMENT #mesFavCount (source unique de vérité)
  7119.             // L'observer se chargera de synchroniser giftCount automatiquement
  7120.             const mesFavCount = document.getElementById('mesFavCount');
  7121.             if (mesFavCount) {
  7122.                 let currentCount = getFavorisCount();
  7123.                 currentCount++;
  7124.                 updateFavorisDisplay(currentCount);
  7125.                 console.log('[AddFavoris] ✅ mesFavCount incrémenté:', currentCount);
  7126.                 
  7127.                 // L'observer MutationObserver va automatiquement :
  7128.                 // - Synchroniser giftCount
  7129.                 // - Mettre à jour le sidebar
  7130.                 // - Mettre à jour product-suggestions
  7131.             }
  7132.             
  7133.             // Update other counters
  7134.             var $total = parseInt($("#totalLike").html()) + 1;
  7135.             $("#totalLike").html($total);
  7136.             $("#totalLikeTitle").html($total);
  7137.             $("#totalLikeMobile").html($total);
  7138.             
  7139.             // Add gift button animation
  7140.             const giftButton = document.querySelector('.gift-button');
  7141.             if (giftButton) {
  7142.                 giftButton.classList.add('active');
  7143.                 setTimeout(() => {
  7144.                     giftButton.classList.remove('active');
  7145.                 }, 600);
  7146.             }
  7149.             var $data = { 'id': $id, 'idSejour': $idSejour };
  7150.             $.ajax({
  7151.                 type: "POST",
  7152.                 url: "{{ path('Ajouter_fav') }}",
  7153.                 data: $data,
  7154.                 success: function () {
  7155.                     $('.IconDelete').each(function () {
  7156.                         $(this).css('pointer-events', '');
  7157.                     });
  7159.                     if ($description === undefined) {
  7160.                         $description = ''; // Set it to an empty string
  7161.                     }
  7162.                     $('.rowMaselection').append(
  7163.                         '<div class="column" id="column-' + $id + '">'+
  7164.                         '<a style="position: relative;" title="Enlever de ma sélection" onclick="supprimerFavoris(' + $id + ',' + $idSejour + ')" class="iconeSuppImg"><i class="bi bi-x" style="font-size:17px;cursor:pointer;color:#d30909;float:right;margin-top:-3%;margin-right:2%"></i></a>'+
  7165.                         '<a class="photo-zoom">'+
  7166.                         '<img data-idAtach="'+$id+'" id="'+$idSejour+'" src="'+$urlimg+'"></a>'+
  7167.                         ($description ? '<h4 id="commint" class="titleHeadPhoto">'+$description+'</h4>' : '')+ // Only add the <h4> if $description is not empty
  7168.                         '</div>'
  7169.                     );
  7171.                     // Directly update nbLikes count in the header
  7172.                     var currentNbLikes = parseInt($('#favoris-link-Accueilpayment .nbrpanier').text());
  7173.                     var newNbLikes = currentNbLikes + 1;
  7174.                     $('#favoris-link-Accueilpayment .nbrpanier').text(newNbLikes);
  7175.                     
  7176.                     // Mettre à jour l'alerte avec le nouveau nombre
  7177.                     const finalCount = getCurrentFavoriteCount();
  7178.                     if (typeof updatePurchaseAlert === 'function') {
  7179.                         updatePurchaseAlert(finalCount);
  7180.                     }
  7181.                 },
  7182.                 error: function (xhr, status, error) {
  7183.                     console.error('Error:', error);
  7184.                 }
  7185.             });
  7186.         }
  7188.         $(document).on('click', '.bi-heart, .bi-heart-fill', function (e) {
  7189.         const heartIcon       = $(this);
  7190.         
  7191.         // 🛡️ PROTECTION : Ignorer les clics sur le bouton favoris de la toolbar
  7192.         // Ce bouton sert uniquement à FILTRER, pas à ajouter/supprimer des favoris
  7193.         if (heartIcon.closest('.mtb-btn').length > 0) {
  7194.             console.log('💗 Clic sur bouton toolbar favoris ignoré (gestion séparée)');
  7195.             return; // Ne rien faire, c'est géré par le listener de la toolbar
  7196.         }
  7197.         
  7198.         const heartContainer  = heartIcon.closest('.heart-icon');
  7200.         // Extract data attributes
  7201.         const attachmentId    = heartContainer.data('id');
  7202.         const sejourId        = heartContainer.data('sejour-id');
  7203.         const path            = heartContainer.data('path');
  7204.         const description     = heartContainer.data('description');
  7205.         const isFavorite      = heartIcon.hasClass('bi-heart-fill');
  7207.         if (isFavorite) {
  7208.             // Remove from favorites
  7209.             supprimerFavoris(attachmentId, sejourId);
  7210.         } else {
  7211.             // Add to favorites
  7212.             AddFavoris(attachmentId, sejourId, path, description);
  7213.         }
  7215.         // Update UI components after the action (sans double comptage)
  7216.         setTimeout(function() {
  7217.             const likeCountLabel = document.getElementById('likeCount');
  7218.             
  7219.             if (likeCountLabel) {
  7220.                 const currentCount = parseInt(likeCountLabel.textContent, 10) || 0;
  7221.                 
  7222.                 // Update UI components seulement
  7223.                 updateCardContent(currentCount);
  7224.                 updateFavoritesSidebar();
  7225.                 $("#close-favorites-btn").click();
  7226.                 
  7227.                 // 🎯 Product suggestions sont mis à jour automatiquement par le MutationObserver
  7228.                 // dans parent-toasts.js qui observe #mesFavCount
  7229.                 // updateProductSuggestionsLive(currentCount); // ← SUPPRIMÉ (doublon)
  7230.             }
  7231.         }, 50);
  7232.     });
  7239.         // Ajoutez les événements sur les icônes de cœur
  7240.         document.querySelectorAll('.IconDelete').forEach((icon) => {
  7241.             icon.addEventListener('click', (event) => {
  7242.                 const isFavorite = icon && icon.classList && icon.classList.contains('bi-heart-fill');
  7243.                 if (isFavorite) {
  7244.                     removeFavorite();
  7245.                     if (icon.classList) {
  7246.                       icon.classList.remove('bi-heart-fill');
  7247.                       icon.classList.add('bi-heart');
  7248.                     }
  7249.                 } else {
  7250.                     addFavorite();
  7251.                     if (icon.classList) {
  7252.                       icon.classList.remove('bi-heart');
  7253.                       icon.classList.add('bi-heart-fill');
  7254.                     }
  7255.                 }
  7256.             });
  7257.         });
  7259.         // Vérifie l'état initial
  7260.         checkFavoritesAlert();
  7261.         
  7262.         
  7263.         // ⚡ OPTIMISÉ: Réduction du délai d'initialisation
  7264.       
  7265.   </script>
  7266.   <!-- Initialisation -->
  7267.   <script>
  7268.     // ⚡ OPTIMISATION: Différer l'initialisation d'AOS pour ne pas bloquer le chargement
  7269.     setTimeout(function() {
  7270.       AOS.init({
  7271.         duration: 800,
  7272.         easing: "ease-in-out"
  7273.       });
  7274.     }, 100);
  7275.     // 🎯 DAY FILTER DROPDOWN LOGIC (Senior UX)
  7276.     document.addEventListener('DOMContentLoaded', function() {
  7277.       initializeDayFilters();
  7278.       
  7279.       // Initialiser le compteur audio avec la valeur correcte
  7280.       setTimeout(function() {
  7281.         updateAudioButtonState('days');
  7282.       }, 500);
  7283.     });
  7285.     function initializeDayFilters() {
  7286.       const dropdowns = document.querySelectorAll('.day-filter-dropdown');
  7287.       
  7288.       dropdowns.forEach(dropdown => {
  7289.         const toggle = dropdown.querySelector('.filter-toggle');
  7290.         const menu = dropdown.querySelector('.filter-dropdown-menu');
  7291.         const options = dropdown.querySelectorAll('.filter-option');
  7292.         const dayIndex = dropdown.dataset.dayIndex;
  7293.         const dayContainer = document.getElementById(`demP${dayIndex}`);
  7294.         
  7295.         if (!toggle || !menu || !dayContainer) return;
  7296.         
  7297.         // Calculer et mettre à jour les compteurs initiaux
  7298.         updateDayFilterCounts(dropdown, dayContainer);
  7299.         
  7300.         // Toggle dropdown
  7301.         toggle.addEventListener('click', (e) => {
  7302.           e.stopPropagation();
  7303.           const isOpen = dropdown.classList.contains('open');
  7304.           
  7305.           // Fermer tous les autres dropdowns
  7306.           document.querySelectorAll('.day-filter-dropdown.open').forEach(d => {
  7307.             if (d !== dropdown) d.classList.remove('open');
  7308.           });
  7309.           
  7310.           // Toggle le dropdown actuel
  7311.           dropdown.classList.toggle('open', !isOpen);
  7312.         });
  7313.         
  7314.         // Gérer les clics sur les options
  7315.         options.forEach(option => {
  7316.           option.addEventListener('click', (e) => {
  7317.             e.stopPropagation();
  7318.             const filter = option.dataset.filter;
  7319.             
  7320.             // Mettre à jour l'état actif
  7321.             options.forEach(opt => opt.classList.remove('active'));
  7322.             option.classList.add('active');
  7323.             
  7324.             // Appliquer le filtre
  7325.             applyDayFilter(dayContainer, filter);
  7326.             
  7327.             // Fermer le dropdown
  7328.             dropdown.classList.remove('open');
  7329.           });
  7330.         });
  7331.       });
  7332.       
  7333.       // Fermer les dropdowns en cliquant ailleurs
  7334.       document.addEventListener('click', () => {
  7335.         document.querySelectorAll('.day-filter-dropdown.open').forEach(dropdown => {
  7336.           dropdown.classList.remove('open');
  7337.         });
  7338.       });
  7339.     }
  7341.     function updateDayFilterCounts(dropdown, dayContainer) {
  7342.       const photoItems = dayContainer.querySelectorAll('[data-type="photo"]');
  7343.       const videoItems = dayContainer.querySelectorAll('[data-type="video"]');
  7344.       // Compter les messages audio individuels plutôt que les conteneurs
  7345.       const audioMessageItems = dayContainer.querySelectorAll('.audio-message-item[data-type="audio"]');
  7346.       const audioContainers = dayContainer.querySelectorAll('.audio-messages-container[data-type="audio"]');
  7347.       const audioRestricted = dayContainer.querySelectorAll('.audio-messages-restricted[data-type="audio"]');
  7348.       
  7349.       const allItems = dayContainer.querySelectorAll('[data-type]');
  7350.       
  7351.       const countAll = dropdown.querySelector('[data-count-all]');
  7352.       const countPhoto = dropdown.querySelector('[data-count-photo]');
  7353.       const countVideo = dropdown.querySelector('[data-count-video]');
  7354.       const countAudio = dropdown.querySelector('[data-count-audio]');
  7355.       
  7356.       // Compter les messages audio individuels + conteneurs + sections restreintes
  7357.       const totalAudio = audioMessageItems.length + audioContainers.length + audioRestricted.length;
  7358.       
  7359.       if (countAll) countAll.textContent = allItems.length;
  7360.       if (countPhoto) countPhoto.textContent = photoItems.length;
  7361.       if (countVideo) countVideo.textContent = videoItems.length;
  7362.       if (countAudio) countAudio.textContent = totalAudio;
  7363.       
  7364.       // Masquer les options sans contenu
  7365.       const photoOption = dropdown.querySelector('[data-filter="photo"]');
  7366.       const videoOption = dropdown.querySelector('[data-filter="video"]');
  7367.       const audioOption = dropdown.querySelector('[data-filter="audio"]');
  7368.       
  7369.       if (photoOption) photoOption.style.display = photoItems.length > 0 ? 'flex' : 'none';
  7370.       if (videoOption) videoOption.style.display = videoItems.length > 0 ? 'flex' : 'none';
  7371.       if (audioOption) audioOption.style.display = totalAudio > 0 ? 'flex' : 'none';
  7372.     }
  7374.     function applyDayFilter(dayContainer, filter) {
  7375.       const items = dayContainer.querySelectorAll('[data-type]');
  7376.       
  7377.       items.forEach(item => {
  7378.         if (filter === 'all' || item.dataset.type === filter) {
  7379.           item.style.display = '';
  7380.           item.classList.remove('filtered-out');
  7381.         } else {
  7382.           item.style.display = 'none';
  7383.           item.classList.add('filtered-out');
  7384.         }
  7385.       });
  7386.       
  7387.       // Animation fluide pour les éléments visibles
  7388.       requestAnimationFrame(() => {
  7389.         const visibleItems = dayContainer.querySelectorAll('[data-type]:not(.filtered-out)');
  7390.         visibleItems.forEach((item, index) => {
  7391.           item.style.animation = `fadeInUp 0.3s ease forwards ${index * 0.05}s`;
  7392.         });
  7393.       });
  7394.     }
  7396.     // Animation CSS pour fadeInUp
  7397.     if (!document.querySelector('#dayFilterAnimations')) {
  7398.       const style = document.createElement('style');
  7399.       style.id = 'dayFilterAnimations';
  7400.       style.textContent = `
  7401.         @keyframes fadeInUp {
  7402.           from {
  7403.             opacity: 0;
  7404.             transform: translateY(20px);
  7405.           }
  7406.           to {
  7407.             opacity: 1;
  7408.             transform: translateY(0);
  7409.           }
  7410.         }
  7411.       `;
  7412.       document.head.appendChild(style);
  7413.     }
  7415.     document.addEventListener("DOMContentLoaded", function () {
  7416.       const dateCards = document.querySelectorAll(".date-card");
  7417.       const sections = document.querySelectorAll(".collapse");
  7419.       dateCards.forEach((card) => {
  7420.         card.addEventListener("click", function () {
  7421.           // Supprimer les classes actives des autres cartes et sections
  7422.           dateCards.forEach((c) => c.classList.remove("active"));
  7423.           sections.forEach((s) => s.classList.remove("show"));
  7425.           // Ajouter la classe active à la carte cliquée
  7426.           this.classList.add("active");
  7428.           // Récupérer la cible et afficher la bonne section
  7429.           const targetId = this.getAttribute("data-bs-target");
  7430.           const targetSection = document.querySelector(targetId);
  7431.           if (targetSection) {
  7432.             targetSection.classList.add("show");
  7433.           }
  7434.         });
  7435.       });
  7436.     });
  7437.     document.addEventListener("DOMContentLoaded", function () {
  7438.       // Initialisation du carrousel Splide
  7439.       var splide = new Splide("#imageSlider", {
  7440.         type: "loop",
  7441.         perPage: 1,
  7442.         autoplay: true,
  7443.         interval: 6000,
  7444.         pauseOnHover: false,
  7445.         pauseOnFocus: false,
  7446.         pagination: false,
  7447.         arrows: false,
  7448.       });
  7450.       splide.mount();
  7452.       // ⚠️ Scroll automatique désactivé pour meilleure UX
  7453.       // Les utilisateurs peuvent défiler manuellement quand ils le souhaitent
  7454.     });
  7455.   </script>
  7457.   <script>
  7460.    
  7461.     const giftButton = document.querySelector('.gift-button');
  7463.     if (giftButton) {
  7464.         giftButton.addEventListener('click', () => {
  7465.         // Ajouter la classe 'active' pour déclencher l'éclat
  7466.             giftButton.classList.add('active');
  7468.         // Retirer l'animation après qu'elle soit jouée
  7469.         setTimeout(() => {
  7470.                 giftButton.classList.remove('active');
  7471.         }, 600); // La durée doit correspondre à celle de l'animation
  7472.             
  7473.             // Optionnel : rediriger vers la page de commande
  7474.             // window.location.href = '/commande';
  7475.     });
  7476.     }
  7477.     
  7478.     //const HeartAddButton = document.querySelector('.IconDelete');
  7480.     $(".IconDelete").on('click', () => {
  7481.         // Ajouter la classe 'active' pour déclencher l'éclat
  7482.         favoriteButton.classList.add('active');
  7484.         // Retirer l'animation après qu'elle soit jouée
  7485.         setTimeout(() => {
  7486.             favoriteButton.classList.remove('active');
  7487.         }, 600); // La durée doit correspondre à celle de l'animation
  7488.     });
  7492.     $(document).ready(function() {
  7493.         // Attach click event to collapse triggers
  7494.         const lastCard = $('.date-card.modern-card.active');
  7495.         const lastTargetId = lastCard.attr('data-bs-target');
  7497.         if (lastTargetId) {
  7498.             $(lastTargetId).collapse('show'); // Expand the last collapse section
  7499.             LoadImagesCloud($(lastTargetId)); // Load images for the last day
  7500.         }
  7501.         $('[data-bs-toggle="collapse"]').on('click', function() {
  7502.             var targetId = $(this).attr('data-bs-target'); // Get the target ID
  7503.             $('.date-card.modern-card').removeClass('active'); // Remove 'active' class from all cards
  7504.             $(this).addClass('active'); // Add 'active' class to the clicked card
  7505.             LoadImagesCloud($(targetId)); // Ensure this function works as expected
  7506.                // Hide all other collapses except the one clicked
  7509.                $('[data-bs-target]').each(function() {
  7510.                 var currentTargetId = $(this).attr('data-bs-target');
  7511.                 // If the current collapse is not the one clicked, hide it
  7512.                 if (currentTargetId !== targetId) {
  7513.                     $(currentTargetId).collapse('hide');
  7514.                     //$('[data-bs-toggle="collapse"]').removeClass('active'); // Remove active class from all cards
  7516.                     //Modifier leurs style en non active aussi
  7517.                 }
  7518.             });
  7520.         });
  7521.     });
  7523.   
  7527.             $(document).ready(function () {
  7529.               
  7533.                 {% if app.session.get("paymentmoniteco") %}
  7534.                 {% if app.session.get("paymentmoniteco") == "succses" %}
  7536.                 Swal.fire({
  7538.                     icon: 'success',
  7539.                     title: ' succès ',
  7540.                     text: 'votre commande est validée'
  7542.                 });
  7544.                 {% endif %}
  7545.                 {% endif %}
  7547.                 if ($total1 > 0) {
  7548.                     $('.iconeFleche').first().click();
  7549.                     //  $([document.documentElement, document.body]).animate({
  7550.                     //  scrollTop: $('.iconeFleche').last().offset().top
  7551.                     //  }, );
  7552.                 }
  7553.                 else {
  7554.                     $(window).scrollTop(0);
  7555.                 }
  7557.                 var slider = $('.responsive').slick({
  7558.                     infinite: true,
  7559.                     slidesToShow: 1,
  7560.                     slidesToScroll: 1,
  7561.                     autoplay: true,
  7562.                     autoplaySpeed: 4000,
  7563.                     pauseOnFocus: false,
  7564.                     pauseOnHover: false,
  7565.                     draggable: false,
  7566.                     fade: true
  7568.                 });
  7569.                 $('.responsive').css('display', 'block');
  7570.                 $('.namePRD').css('display', 'block');
  7572.                 var currSlide = 0;
  7573.                 var nextSlide = 0;
  7576.                 slider.on('afterChange', function (event, slick, currentSlide) {
  7578.                     console.log(typeof ($('.slick-active .slick-current').find('.imgproduit2')) != "undefined");
  7579.                     if (typeof ($('.slick-active .slick-current').find('.imgproduit2')) != "undefined") {
  7580.                         setTimeout(function () {
  7581.                             $('.slick-active .imgproduit1').removeClass('animated fadeIn');
  7582.                             $('.slick-active .imgproduit1').addClass('animated fadeOut');
  7583.                             $('.slick-active .imgproduit1').css('display', 'none');
  7584.                             $('.slick-active .imgproduit2').css('display', 'block');
  7585.                             $('.slick-active .imgproduit2').removeClass('animated fadeOut');
  7586.                             $('.slick-active .imgproduit2').addClass('animated fadeIn');
  7587.                         }, 2000);
  7588.                     }
  7589.                 });
  7591.                 slider.on('beforeChange', function (event, slick, currentSlide, nextSlide) {
  7592.                     currSlide = currentSlide;
  7593.                     $('.imgproduit2').each(function () {
  7594.                         $(this).removeClass('animated fadeIn');
  7595.                         $(this).addClass('animated fadeOut');
  7596.                         $(this).css('display', 'none');
  7597.                     });
  7598.                     $('.imgproduit1').each(function () {
  7599.                         $(this).css('display', 'block');
  7600.                         $(this).removeClass('animated fadeOut');
  7601.                         $(this).addClass('animated fadeIn');
  7602.                     });
  7603.                 });
  7604.                 $('.columnPub').each(function () {
  7605.                     $(this).slick({
  7606.                         infinite: true,
  7607.                         speed: 50,
  7608.                         fade: true,
  7609.                         slidesToShow: 1,
  7610.                         slidesToScroll: 1,
  7611.                         autoplay: true,
  7612.                         pauseOnFocus: false,
  7613.                         pauseOnHover: false,
  7614.                         draggable: false
  7616.                     });
  7617.                     $(this).css('display', 'block');
  7618.                 });
  7619.                 $("#offrePack").click();
  7620.                 {%if app.user.showpubprod != 'false' %}
  7621.                 $('#btnPubProd').click();
  7622.                 $('.modal-backdrop').css('background-color', 'rgba(0, 0, 0, 0.2)');
  7623.                 {% endif %}
  7624.             });
  7625.             $("#closeImage").click(function () {
  7626.                 $('#myModalImage').css('display', "none");
  7627.             });
  7628.             $.ajax({
  7629.                 type: "POST",
  7630.                 url: "{{ path("delateSession_parent") }}",
  7631.                 success: function () { }
  7632.             });
  7633.             function afficheDiv(elem) {
  7634.                 $('.nav-link').each(function () {
  7635.                     $(this).removeClass('active');
  7636.                 });
  7638.                 elem.addClass('active');
  7639.                 if (elem.attr('id') === "esphoto" || elem.attr('id') === "esphotoMobile") {
  7640.                     $("#espacphoto").show();
  7641.                     $("#espacemessage").hide();
  7642.                     $("#espaceMa_selection").hide();
  7643.                     pageMenu = 'MonSejour'
  7644.                     $(this).addClass('active');
  7645.                    $('#imageActifphoto').css('display', 'block');
  7646.                      $('#imagenoActifphoto').css('display', 'none');
  7647.                    $('#VocalActivee').css('display', 'none');
  7648.                      $('#noActifVocal').css('display', 'block');
  7650.                 }
  7651.                 if (elem.attr('id') === "esmessage" || elem.attr('id') === "esmessageMobile") {
  7652.                     $("#espacphoto").hide();
  7653.                     $("#espaceMa_selection").hide();
  7654.                     $("#espacemessage").show();
  7655.                     pageMenu = 'BoiteVocale'
  7656.                     $("#espaceMa_selection").hide();
  7657.                     $(this).addClass('active');
  7658.                   $('#imageActifphoto').css('display', 'none');
  7659.                      $('#imagenoActifphoto').css('display', 'block');
  7660.                    $('#VocalActivee').css('display', 'block');
  7661.                      $('#noActifVocal').css('display', 'none');
  7665.                 }
  7666.                 if (elem.attr('id') === "esselection" || elem.attr('id') === "esselectionMobile") {
  7667.                     $("#espacphoto").hide();
  7668.                     $("#espacemessage").hide();
  7669.                     $("#espaceMa_selection").show();
  7670.                     $(homeNavmob).removeClass('bi bi-house-door-fill');
  7671.                     $(homeNavmob).addClass('bi bi-house-door');
  7672.                     $(micromob).removeClass('bi bi-mic-fill');
  7673.                     $(micromob).addClass('bi bi-mic');
  7674.                     $(selecNavmob).removeClass('bi bi-heart');
  7675.                     $(selecNavmob).addClass('bi bi-heart-fill');
  7677.                 }
  7678.             }
  7687.             function LoadImagesCloud($element) {
  7688.                 $element.find('.photo-zoom img').each(function ($this) {
  7689.                     if ($(this).attr('data-src') != $(this).attr('src')) {
  7690.                         $(this).attr('src', $(this).attr('data-src'));
  7691.                     }
  7692.                 });
  7693.             }
  7695.   </script>
  7696.   <script>
  7697.     // ⚡ OPTIMISATION: Regroupement des initialisations jQuery
  7698.     $(document).ready(function () {
  7699.       // Modal PubProd
  7700.       $("#PubProd").on("hidden.bs.modal", function () {
  7701.         $(document).trigger("modalClosed");
  7702.       });
  7703.       
  7704.       // NoShow checkbox
  7705.       $("#noShow").on("change", function () {
  7706.         if ($(this).is(":checked")) {
  7707.           $.ajax({
  7708.             url: "/Parent/showpub",
  7709.             type: "POST",
  7710.             dataType: "json",
  7711.             success: function (response) {
  7712.               if (response.status === "success") {
  7713.                 console.log("User showpubprod updated successfully.");
  7714.               } else {
  7715.                 console.log("Error:", response.message);
  7716.               }
  7717.             },
  7718.             error: function (xhr, status, error) {
  7719.               console.log("AJAX Error:", error);
  7720.             },
  7721.           });
  7722.         }
  7723.       });
  7724.     });
  7725.   </script>
  7726. </div>
  7727. <!-- Script pour la sidebar des favoris -->
  7728. <script>
  7729.   // ⚡ OPTIMISATION: Utiliser requestIdleCallback pour ne pas bloquer le thread principal
  7730.  
  7731.   
  7732.     
  7733.     // Charger les favoris
  7734.     function loadFavorites() {
  7735.       $.ajax({
  7736.         url: "/Parent/mes-favoris",
  7737.         type: "GET",
  7738.         dataType: "json",
  7739.         beforeSend: function() {
  7740.           $("#favorites-grid").html("<div style='text-align:center'>Chargement...</div>");
  7741.         },
  7742.         success: function(data) {
  7743.           $("#favorites-grid").empty();
  7744.           
  7745.           if (data.data && data.data.length > 0) {
  7746.             $("#favorites-empty-state").hide();
  7747.             
  7748.             $.each(data.data, function(i, fav) {
  7749.               var item = $("<div class='favorite-item'></div>");
  7750.               var img = $("<img>").attr("src", fav.path).attr("alt", fav.descreption || "Photo favorite");
  7751.               var overlay = $("<div class='favorite-overlay'></div>");
  7752.         
  7753.               
  7754.               btn.click(function(e) {
  7755.                 e.preventDefault();
  7756.                 e.stopPropagation();
  7757.                 removeFavorite(fav.id);
  7758.               });
  7759.               
  7760.               overlay.append(btn);
  7761.               item.append(img).append(overlay);
  7762.               $("#favorites-grid").append(item);
  7763.             });
  7764.             
  7765.             $("#favorites-counter").text(data.data.length);
  7766.             var percentage = (data.data.length / 10) * 100;
  7767.             $("#favorites-progress").css("width", percentage + "%");
  7768.             
  7769.           } else {
  7770.             $("#favorites-empty-state").show();
  7771.             $("#favorites-counter").text("0");
  7772.             $("#favorites-progress").css("width", "0%");
  7773.           }
  7774.         },
  7775.         error: function() {
  7776.           $("#favorites-grid").html("<div style='color:red;text-align:center'>Erreur de chargement</div>");
  7777.         }
  7778.       });
  7779.     }
  7780.     
  7781.     // Supprimer un favori
  7782.     function removeFavorite(id) {
  7783.       $.ajax({
  7784.         url: "/Parent/remove-favorite/" + id,
  7785.         type: "POST",
  7786.         success: function() {
  7787.           loadFavorites();
  7788.           
  7789.           // Mettre à jour tous les compteurs de favoris
  7790.           updateAllFavoriteCounters();
  7791.         },
  7792.         error: function() {
  7793.           alert("Erreur lors de la suppression du favori");
  7794.         }
  7795.       });
  7796.     }
  7797.   });
  7798. </script>
  7801. <!-- === E-COMMERCE SIDEBAR JAVASCRIPT === -->
  7802. <script>
  7803. // Configuration UX_VARIANT pour A/B testing
  7804. let UX_VARIANT = 'EMOTION'; // ou 'URGENCY'
  7807. // Variables globales e-commerce
  7808. let sejourEndDate = null; // À définir avec la vraie date de fin du séjour
  7810. // Fonction utilitaire robuste pour gérer les compteurs de favoris
  7811. window.getFavoriteCount = function getFavoriteCount() {
  7812.   const likeCountInput = document.getElementById('likeCount');
  7813.   if (likeCountInput) {
  7814.     // Priorité à la valeur de l'input
  7815.     const value = likeCountInput.value || likeCountInput.textContent || 0;
  7816.     return parseInt(value, 10) || 0;
  7817.   }
  7818.   
  7819.   // Fallback sur giftCount
  7820.   const giftCount = document.getElementById('giftCount');
  7821.   if (giftCount && giftCount.textContent) {
  7822.     return parseInt(giftCount.textContent.trim(), 10) || 0;
  7823.   }
  7824.   
  7825.   return 0;
  7826. };
  7828. window.setFavoriteCount = function setFavoriteCount(count) {
  7829.   const likeCountInput = document.getElementById('likeCount');
  7830.   if (likeCountInput) {
  7831.     // Mettre à jour les deux propriétés pour être sûr
  7832.     likeCountInput.value = count;
  7833.     likeCountInput.textContent = count;
  7834.   }
  7835.   
  7836.   // Mettre à jour les autres compteurs
  7837.   const giftCount = document.getElementById('giftCount');
  7838.   if (giftCount) {
  7839.     giftCount.textContent = count;
  7840.   }
  7841.   
  7842.   const mesFavCount = document.getElementById('mesFavCount');
  7843.   if (mesFavCount) {
  7844.     mesFavCount.textContent = count;
  7845.   }
  7846.   
  7847.   // Mettre à jour l'input hidden
  7848.   const nbFavCurrentInput = document.getElementById('nbFavCurrent');
  7849.   if (nbFavCurrentInput) {
  7850.     nbFavCurrentInput.value = count;
  7851.   }
  7852. };
  7854. // Fonction pour définir la date de fin du séjour
  7855. window.setSejourEndDate = function setSejourEndDate(dateString) {
  7856.   sejourEndDate = dateString;
  7857.   console.log('🎯 Sejour end date set to:', sejourEndDate);
  7858.   
  7859.   // Mettre à jour le countdown si le sidebar est ouvert
  7860.   updateCountdownTimer();
  7861. };
  7863. // Fonctions d'ouverture/fermeture du sidebar
  7864. window.openEcommerceSidebar = function openEcommerceSidebar() {
  7865.   const sidebar = document.getElementById('ecommerce-sidebar');
  7866.   if (!sidebar) {
  7867.     console.error('❌ E-commerce sidebar element not found!');
  7868.     return false;
  7869.   }
  7870.   
  7871.   console.log('🎁 [OPEN SIDEBAR] Ouverture du sidebar e-commerce...');
  7872.   const favCount = window.getFavoriteCount ? window.getFavoriteCount() : 0;
  7873.   console.log('🎁 [OPEN SIDEBAR] Favoris actuels:', favCount);
  7874.   
  7875.   // D'abord ouvrir le sidebar pour que les éléments soient dans le DOM
  7876.   sidebar.classList.add('active');
  7877.   console.log('🎁 [OPEN SIDEBAR] Sidebar classe "active" ajoutée');
  7878.   
  7879.   // Puis mettre à jour le contenu (petit délai pour que le DOM soit prêt)
  7880.   setTimeout(() => {
  7881.     console.log('🎁 [OPEN SIDEBAR] Mise à jour du contenu...');
  7882.     
  7883.     // Appeler la fonction de parent-toasts.js
  7884.     if (typeof window.parentConversion !== 'undefined' && typeof window.parentConversion.updateSidebar === 'function') {
  7885.       console.log('✅ [OPEN SIDEBAR] Appel de parentConversion.updateSidebar()');
  7886.       window.parentConversion.updateSidebar();
  7887.     } else {
  7888.       console.warn('⚠️ [OPEN SIDEBAR] parent-toasts.js non disponible, fallback sur fonction locale');
  7889.       // Fallback sur la fonction locale
  7890.       if (typeof window.updateEcommerceSidebarContent === 'function') {
  7891.         window.updateEcommerceSidebarContent(favCount);
  7892.       }
  7893.     }
  7894.   }, 100); // 100ms de délai pour que le sidebar soit visible
  7895.   
  7896.   return true;
  7897. };
  7899. window.closeEcommerceSidebar = function closeEcommerceSidebar() {
  7900.   const sidebar = document.getElementById('ecommerce-sidebar');
  7901.   if (sidebar) {
  7902.     sidebar.classList.remove('active');
  7903.     console.log('🎯 E-commerce sidebar closed');
  7904.   } else {
  7905.     console.error('❌ E-commerce sidebar element not found!');
  7906.   }
  7907. };
  7909. // 🚫 FONCTION LEGACY SUPPRIMÉE - Utiliser parent-toasts.js à la place
  7910. // Cette fonction était en conflit avec updateEcommerceSidebar() de parent-toasts.js
  7911. // qui gère TOUT : titre, sous-titre, compteurs, visibilité des produits, CTA, etc.
  7912. window.updateEcommerceSidebarContent = function updateEcommerceSidebarContent(favoriteCount) {
  7913.   console.warn('[LEGACY] updateEcommerceSidebarContent appelé - Redirection vers parent-toasts.js');
  7914.   
  7915.   // Rediriger vers la vraie fonction
  7916.   if (typeof window.parentConversion !== 'undefined' && typeof window.parentConversion.updateSidebar === 'function') {
  7917.     window.parentConversion.updateSidebar();
  7918.   } else {
  7919.     console.error('[LEGACY] parent-toasts.js non disponible !');
  7920.   }
  7921. }
  7923. // 🚫 FONCTION SUPPRIMÉE - Géré par parent-toasts.js
  7924. // Tout est maintenant géré dans updateEcommerceSidebar() de parent-toasts.js
  7926. // Fonction pour gérer le countdown
  7927. window.updateCountdownTimer = function updateCountdownTimer() {
  7928.   const countdownTimer = document.getElementById('countdown-timer');
  7929.   const daysLeftSpan = document.getElementById('days-left');
  7930.   
  7931.   if (!countdownTimer || !daysLeftSpan) return;
  7932.   
  7933.   // Si pas de date définie, utiliser une date par défaut (6 semaines à partir d'aujourd'hui)
  7934.   let expirationDate;
  7935.   if (sejourEndDate) {
  7936.     const endDate = new Date(sejourEndDate);
  7937.     expirationDate = new Date(endDate.getTime() + (6 * 7 * 24 * 60 * 60 * 1000)); // +6 semaines
  7938.   } else {
  7939.     // Date par défaut : 6 semaines à partir d'aujourd'hui
  7940.     expirationDate = new Date();
  7941.     expirationDate.setDate(expirationDate.getDate() + (6 * 7));
  7942.   }
  7943.   
  7944.   const now = new Date();
  7945.   const daysLeft = Math.ceil((expirationDate - now) / (24 * 60 * 60 * 1000));
  7946.   
  7947.   if (daysLeft <= 10 && daysLeft > 0) {
  7948.     countdownTimer.style.display = 'block';
  7949.     daysLeftSpan.textContent = daysLeft;
  7950.     
  7951.     // Mettre à jour les titres avec le countdown si variante URGENCY
  7952.     if (UX_VARIANT === 'URGENCY') {
  7953.       const title = document.getElementById('ecommerce-title');
  7954.       if (title) {
  7955.         const favoriteCount = parseInt(document.getElementById('giftCount')?.textContent || '0');
  7956.         if (favoriteCount > 0) {
  7957.           if (favoriteCount < 5) {
  7958.             title.innerHTML = `⏳ ${favoriteCount} souvenirs - Plus que ${daysLeft} jours !`;
  7959.           } else if (favoriteCount < 12) {
  7960.             title.innerHTML = `⏳ ${favoriteCount} magnifiques souvenirs - Plus que ${daysLeft} jours !`;
  7961.           } else {
  7962.             title.innerHTML = `⏳ Superbe collection de ${favoriteCount} photos - Plus que ${daysLeft} jours !`;
  7963.           }
  7964.         }
  7965.       }
  7966.     }
  7967.   } else {
  7968.     countdownTimer.style.display = 'none';
  7969.   }
  7970. }
  7972. // Fonction pour commander un produit
  7973. window.orderProduct = function orderProduct(productType) {
  7974.   let favoriteCount = 0;
  7975.   
  7976.   // Méthode 1: Fonction getCurrentFavoriteCount
  7977.   try {
  7978.     if (typeof getCurrentFavoriteCount === 'function') {
  7979.       favoriteCount = getCurrentFavoriteCount();
  7980.     }
  7981.   } catch (e) {
  7982.     console.log('⚠️ getCurrentFavoriteCount non disponible:', e);
  7983.   }
  7984.   
  7985.   // Méthode 2: Element giftCount
  7986.   if (favoriteCount === 0) {
  7987.     const giftCount = document.getElementById('giftCount');
  7988.     if (giftCount && giftCount.textContent) {
  7989.       favoriteCount = parseInt(giftCount.textContent.trim()) || 0;
  7990.     }
  7991.   }
  7992.   
  7993.   // Méthode 3: Récupérer depuis les éléments qui affichent le nombre de favoris
  7994.   if (favoriteCount === 0) {
  7995.     const albumFavCount = document.getElementById('album-fav-count');
  7996.     const digitalFavCount = document.getElementById('digital-fav-count');
  7997.     
  7998.     if (albumFavCount && albumFavCount.textContent) {
  7999.       favoriteCount = parseInt(albumFavCount.textContent.trim()) || 0;
  8000.     } else if (digitalFavCount && digitalFavCount.textContent) {
  8001.       favoriteCount = parseInt(digitalFavCount.textContent.trim()) || 0;
  8002.     }
  8003.   }
  8004.   
  8005.   // Méthode 4: Variable globale likes
  8006.   if (favoriteCount === 0 && typeof likes !== 'undefined' && likes) {
  8007.     favoriteCount = likes.length || 0;
  8008.   }
  8009.   
  8010.   // Méthode 5: Compter les éléments liked dans le DOM
  8011.   if (favoriteCount === 0) {
  8012.     const likedElements = document.querySelectorAll('.liked, .photo.liked, [data-liked="true"]');
  8013.     favoriteCount = likedElements.length;
  8014.   }
  8015.   
  8016.   // Debug pour voir la valeur récupérée
  8017.   console.log('🔍 Nombre de favoris détecté:', favoriteCount);
  8018.   
  8019.   if (favoriteCount === 0) {
  8020.     // Afficher une notification plus élégante
  8021.     const notification = document.createElement('div');
  8022.     notification.className = 'favorite-notification';
  8023.     notification.innerHTML = `
  8024.       <div class="notification-content">
  8025.         <i class="bi bi-heart" style="color: #e91e63; font-size: 1.5rem; margin-right: 10px;"></i>
  8026.         <span>Veuillez d'abord sélectionner des photos favorites !</span>
  8027.         <button onclick="this.parentElement.parentElement.remove()" style="background: none; border: none; color: #666; font-size: 1.2rem; margin-left: 10px;">&times;</button>
  8028.       </div>
  8029.     `;
  8030.     
  8031.     // Styles pour la notification
  8032.     notification.style.cssText = `
  8033.       position: fixed;
  8034.       top: 20px;
  8035.       right: 20px;
  8036.       background: #fff;
  8037.       border: 2px solid #e91e63;
  8038.       border-radius: 8px;
  8039.       padding: 15px;
  8040.       box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  8041.       z-index: 10000;
  8042.       animation: slideInRight 0.3s ease;
  8043.     `;
  8044.     
  8045.     // Ajouter l'animation CSS si elle n'existe pas
  8046.     if (!document.getElementById('notification-styles')) {
  8047.       const style = document.createElement('style');
  8048.       style.id = 'notification-styles';
  8049.       style.textContent = `
  8050.         @keyframes slideInRight {
  8051.           from { transform: translateX(100%); opacity: 0; }
  8052.           to { transform: translateX(0); opacity: 1; }
  8053.         }
  8054.         .notification-content {
  8055.           display: flex;
  8056.           align-items: center;
  8057.         }
  8058.       `;
  8059.       document.head.appendChild(style);
  8060.     }
  8061.     
  8062.     document.body.appendChild(notification);
  8063.     
  8064.     // Supprimer automatiquement après 5 secondes
  8065.     setTimeout(() => {
  8066.       if (notification.parentElement) {
  8067.         notification.remove();
  8068.       }
  8069.     }, 5000);
  8070.     
  8071.     return;
  8072.   }
  8073.   
  8074.   // Construire l'URL avec les favoris pré-sélectionnés
  8075.   let orderUrl = '';
  8076.   
  8077.   switch (productType) {
  8078.     case 'album':
  8079.       orderUrl = `{{ path('EditionAlbum') }}?favorites=${favoriteCount}`;
  8080.       break;
  8081.     case 'digital':
  8082.       orderUrl = `{{ path('PackPhotosNumerique_Favoris', {'nbr': 15}) }}?favorites=${favoriteCount}`;
  8083.       break;
  8084.     case 'prints':
  8085.       orderUrl = `{{ path('AjoutPochettePhotos_Favoris', {'nbr': 12}) }}?favorites=${favoriteCount}`;
  8086.       break;
  8087.     default:
  8088.       console.error('Type de produit non reconnu:', productType);
  8089.       alert('Erreur: Type de produit non reconnu');
  8090.       return;
  8091.   }
  8092.   
  8093.   // Analytics/tracking
  8094.   console.log('Product ordered', { productType, favoriteCount, url: orderUrl });
  8095.   
  8096.   // Redirection vers la commande
  8097.   if (orderUrl) {
  8098.     // Vérifier que l'URL est valide
  8099.     try {
  8100.       new URL(orderUrl, window.location.origin);
  8101.     window.location.href = orderUrl;
  8102.     } catch (error) {
  8103.       console.error('URL invalide générée:', orderUrl, error);
  8104.       alert('Erreur: Impossible de générer le lien de commande');
  8105.     }
  8106.   } else {
  8107.     console.error('Aucune URL générée pour le produit:', productType);
  8108.     alert('Erreur: Impossible de générer le lien de commande');
  8109.   }
  8110. }
  8112. // Fonction pour tester tous les liens de produits
  8113. window.testProductLinks = function() {
  8114.   const products = ['album', 'digital', 'prints'];
  8115.   const favoriteCount = window.getFavoriteCount() || 0;
  8116.   
  8117.   console.log('🧪 Test des liens de produits avec', favoriteCount, 'favoris');
  8118.   
  8119.   products.forEach(productType => {
  8120.     try {
  8121.       let testUrl = '';
  8122.       switch (productType) {
  8123.         case 'album':
  8124.           testUrl = `{{ path('EditionAlbum') }}?favorites=${favoriteCount}`;
  8125.           break;
  8126.         case 'digital':
  8127.           testUrl = `{{ path('PackPhotosNumerique_Favoris', {'nbr': 15}) }}?favorites=${favoriteCount}`;
  8128.           break;
  8129.         case 'prints':
  8130.           testUrl = `{{ path('AjoutPochettePhotos_Favoris', {'nbr': 12}) }}?favorites=${favoriteCount}`;
  8131.           break;
  8132.       }
  8133.       
  8134.       // Vérifier que l'URL est valide
  8135.       const url = new URL(testUrl, window.location.origin);
  8136.       console.log(`✅ ${productType}: ${url.href}`);
  8137.     } catch (error) {
  8138.       console.error(`❌ ${productType}: Erreur URL`, error);
  8139.     }
  8140.   });
  8141. };
  8143. // Fonction pour valider les liens au chargement de la page
  8144. window.validateProductLinks = function() {
  8145.   // Vérifier que tous les boutons de produits existent
  8146.   const albumBtn = document.querySelector('button[onclick*="orderProduct(\'album\')"]');
  8147.   const digitalBtn = document.querySelector('button[onclick*="orderProduct(\'digital\')"]');
  8148.   const printsBtn = document.querySelector('button[onclick*="orderProduct(\'prints\')"]');
  8149.   
  8150.   if (!albumBtn) console.warn('⚠️ Bouton album non trouvé');
  8151.   if (!digitalBtn) console.warn('⚠️ Bouton digital non trouvé');
  8152.   if (!printsBtn) console.warn('⚠️ Bouton prints non trouvé');
  8153.   
  8154.   // Tester les liens
  8155.   window.testProductLinks();
  8156. };
  8158. // Fonction centrale de mise à jour de TOUS les compteurs de favoris
  8159. window.updateAllFavoriteCounters = function() {
  8160.   // Récupérer le compte depuis #mesFavCount (source unique de vérité)
  8161.   const mesFavCount = document.getElementById('mesFavCount');
  8162.   let favoriteCount = 0;
  8163.   
  8164.   if (mesFavCount) {
  8165.     favoriteCount = parseInt(mesFavCount.textContent || '0');
  8166.   }
  8167.   
  8168.   console.log('[updateAllFavoriteCounters] 💗 Synchronisation:', favoriteCount, 'favoris');
  8169.   
  8170.   // Synchroniser giftCount (bouton cadeau) avec animation
  8171.   const giftCount = document.getElementById('giftCount');
  8172.   if (giftCount) {
  8173.     giftCount.textContent = favoriteCount;
  8174.     giftCount.classList.remove('gift-count-bounce');
  8175.     setTimeout(() => giftCount.classList.add('gift-count-bounce'), 10);
  8176.   }
  8177.   
  8178.   // Mettre à jour les compteurs dans le sidebar même s'il n'est pas ouvert
  8179.   const albumCount = document.getElementById('album-count');
  8180.   const digitalCount = document.getElementById('digital-count');
  8181.   const printsCount = document.getElementById('prints-count');
  8182.   
  8183.   if (albumCount) albumCount.textContent = favoriteCount;
  8184.   if (digitalCount) digitalCount.textContent = favoriteCount;
  8185.   if (printsCount) printsCount.textContent = Math.min(favoriteCount, 12);
  8186.   
  8187.   // Mettre à jour les icônes de favoris dans les produits
  8188.   const albumFavCount = document.getElementById('album-fav-count');
  8189.   const digitalFavCount = document.getElementById('digital-fav-count');
  8190.   const printsFavCount = document.getElementById('prints-fav-count');
  8191.   
  8192.   if (albumFavCount) albumFavCount.textContent = favoriteCount;
  8193.   if (digitalFavCount) digitalFavCount.textContent = favoriteCount;
  8194.   if (printsFavCount) printsFavCount.textContent = Math.min(favoriteCount, 12);
  8195.   
  8196.   // Mettre à jour le sidebar si ouvert
  8197.   const sidebar = document.getElementById('ecommerce-sidebar');
  8198.   if (sidebar && sidebar.classList.contains('active')) {
  8199.     console.log('🔄 Sidebar is open, updating content with favoriteCount:', favoriteCount);
  8200.     window.updateEcommerceSidebarContent(favoriteCount);
  8201.   } else {
  8202.     console.log('ℹ️ Sidebar is closed, but updating content anyway for consistency');
  8203.     // Mettre à jour le contenu même si le sidebar n'est pas ouvert pour la cohérence
  8204.     window.updateEcommerceSidebarContent(favoriteCount);
  8205.   }
  8206. };
  8208. // Fonction pour retirer un favori de la grille et exécuter supprimerFavoris
  8209. window.removeFavorite = function removeFavorite(itemId) {
  8210.   // Animation simple de disparition puis suppression
  8211.   const favoriteItem = document.querySelector(`.favorite-item[data-id="${itemId}"]`);
  8212.  
  8213.   if (favoriteItem) {
  8214.     favoriteItem.classList.add('fade-out');
  8215.     setTimeout(() => {
  8216.       favoriteItem.remove();
  8217.       // Appeler la fonction métier si présente
  8218.       if (typeof window.supprimerFavoris === 'function') {
  8219.         const heartIcon = document.querySelector(`#coeur${itemId}`);
  8220.         const sejourId = heartIcon && heartIcon.dataset.sejourId ? heartIcon.dataset.sejourId : '';
  8221.         window.supprimerFavoris(itemId, sejourId);
  8222.       }
  8223.       // Mettre à jour les compteurs
  8224.       updateAllFavoriteCounters();
  8225.     }, 200);
  8226.   }
  8227. };
  8229. // Vérifier que la fonction est bien définie
  8230. console.log('🔍 removeFavorite function defined:', typeof window.removeFavorite);
  8232. // (Nettoyé) Pas de délégation globale ici; les boutons utilisent des onclick simples
  8234. // Fonction pour voir un favori en grand
  8235. window.viewFavorite = function viewFavorite(itemId) {
  8236.   console.log('👁️ Viewing favorite:', itemId);
  8237.   
  8238.   // Essayer d'utiliser la fonction viewImage existante
  8239.   if (typeof window.viewImage === 'function') {
  8240.     window.viewImage(itemId, null);
  8241.   } else {
  8242.     console.log('ℹ️ viewImage function not available, opening in new tab');
  8243.     // Fallback: ouvrir dans un nouvel onglet
  8244.     const favoriteItem = document.querySelector(`.favorite-item[data-id="${itemId}"] img`);
  8245.     if (favoriteItem && favoriteItem.src) {
  8246.       window.open(favoriteItem.src, '_blank');
  8247.     }
  8248.   }
  8249. };
  8251. // Fonction de debug pour tester les compteurs
  8252. window.debugFavoriteCounters = function() {
  8253.   console.log('🔍 Debug Favorite Counters:');
  8254.   console.log('- getFavoriteCount():', window.getFavoriteCount());
  8255.   console.log('- likeCount input value:', document.getElementById('likeCount')?.value);
  8256.   console.log('- likeCount textContent:', document.getElementById('likeCount')?.textContent);
  8257.   console.log('- giftCount textContent:', document.getElementById('giftCount')?.textContent);
  8258.   console.log('- album-count textContent:', document.getElementById('album-count')?.textContent);
  8259.   console.log('- digital-count textContent:', document.getElementById('digital-count')?.textContent);
  8260.   console.log('- prints-count textContent:', document.getElementById('prints-count')?.textContent);
  8261.   console.log('- Sidebar active:', document.getElementById('ecommerce-sidebar')?.classList.contains('active'));
  8262. };
  8264. // Fonction de test pour les boutons de favoris
  8265. window.testFavoriteButtons = function() {
  8266.   console.log('🧪 Testing favorite buttons:');
  8267.   const removeButtons = document.querySelectorAll('.btn-remove-favorite');
  8268.   const viewButtons = document.querySelectorAll('.btn-view-favorite');
  8269.   
  8270.   console.log('- Remove buttons found:', removeButtons.length);
  8271.   console.log('- View buttons found:', viewButtons.length);
  8272.   
  8273.   removeButtons.forEach((btn, index) => {
  8274.     console.log(`- Remove button ${index}:`, {
  8275.       itemId: btn.dataset.itemId,
  8276.       hasClickListener: btn.onclick !== null
  8277.     });
  8278.   });
  8279.   
  8280.   viewButtons.forEach((btn, index) => {
  8281.     console.log(`- View button ${index}:`, {
  8282.       itemId: btn.dataset.itemId,
  8283.       hasClickListener: btn.onclick !== null
  8284.     });
  8285.   });
  8286. };
  8288. // Fermer le sidebar en cliquant en dehors
  8289. document.addEventListener('click', function(e) {
  8290.   const sidebar = document.getElementById('ecommerce-sidebar');
  8291.   const giftButton = document.querySelector('.gift-button');
  8292.   
  8293.   if (sidebar && sidebar.classList.contains('active') && 
  8294.       !sidebar.contains(e.target) && 
  8295.       !giftButton.contains(e.target)) {
  8296.     window.closeEcommerceSidebar();
  8297.   }
  8298. });
  8300. // Fermer avec Escape
  8301. document.addEventListener('keydown', function(e) {
  8302.   if (e.key === 'Escape') {
  8303.     window.closeEcommerceSidebar();
  8304.   }
  8305. });
  8307. // Initialisation au chargement
  8308. document.addEventListener('DOMContentLoaded', function() {
  8309.   // Vérifier que les éléments existent
  8310.   const sidebar = document.getElementById('ecommerce-sidebar');
  8311.   const giftButton = document.getElementById('gift-button-trigger');
  8312.   
  8313.   // Event listener propre pour le bouton cadeau
  8314.   if (giftButton) {
  8315.     giftButton.addEventListener('click', function(e) {
  8316.       e.preventDefault();
  8317.       e.stopPropagation();
  8318.       window.openEcommerceSidebar();
  8319.     });
  8320.   }
  8321.   
  8322.   // Définir la date de fin du séjour si disponible
  8323.   {% if sejour and sejour.dateFinSejour is defined %}
  8324.     window.setSejourEndDate('{{ sejour.dateFinSejour|date("Y-m-d") }}');
  8325.   {% endif %}
  8326.   
  8327.   // Mise à jour initiale du contenu
  8328.   let favoriteCount = 0;
  8329.   try {
  8330.     if (typeof getCurrentFavoriteCount === 'function') {
  8331.       favoriteCount = getCurrentFavoriteCount();
  8332.     } else {
  8333.       // Essayer d'abord l'input likeCount
  8334.       const likeCountInput = document.getElementById('likeCount');
  8335.       if (likeCountInput && likeCountInput.value) {
  8336.         favoriteCount = parseInt(likeCountInput.value, 10) || 0;
  8337.       } else {
  8338.         // Fallback sur giftCount
  8339.         const giftCount = document.getElementById('giftCount');
  8340.         if (giftCount && giftCount.textContent) {
  8341.           favoriteCount = parseInt(giftCount.textContent.trim()) || 0;
  8342.         }
  8343.       }
  8344.     }
  8345.   } catch (e) {
  8346.     console.log('⚠️ Fallback pour favoriteCount initial:', e);
  8347.     // Fallback sur likeCount input
  8348.     const likeCountInput = document.getElementById('likeCount');
  8349.     if (likeCountInput && likeCountInput.value) {
  8350.       favoriteCount = parseInt(likeCountInput.value, 10) || 0;
  8351.     } else {
  8352.       const giftCount = document.getElementById('giftCount');
  8353.       if (giftCount && giftCount.textContent) {
  8354.         favoriteCount = parseInt(giftCount.textContent.trim()) || 0;
  8355.       }
  8356.     }
  8357.   }
  8358.   
  8359.   window.updateEcommerceSidebarContent(favoriteCount);
  8360.   
  8361. });
  8362. </script>
  8364. <!-- 🎯 DAY FILTER POPOVER (instancié une seule fois) -->
  8365. <div id="dayFilterPopover" class="day-popover" role="dialog" aria-modal="true" aria-hidden="true">
  8366.   <div class="dp-arrow" aria-hidden="true"></div>
  8367.   <div class="dp-content" role="group" aria-label="Filtres du jour">
  8368.     <button class="dp-btn" data-filter="all" title="Tout" aria-pressed="true">
  8369.       <i class="bi bi-grid-3x3-gap-fill"></i><span class="dp-count dp-label">Tout</span>
  8370.     </button>
  8371.     <button class="dp-btn" data-filter="photos" title="Photos" aria-pressed="false">
  8372.       <i class="bi bi-images"></i><span class="dp-count" data-bind="photo">0</span>
  8373.     </button>
  8374.     <button class="dp-btn" data-filter="audio" title="Audios" aria-pressed="false">
  8375.       <i class="bi bi-mic-fill"></i><span class="dp-count" data-bind="audio">0</span>
  8376.     </button>
  8377.     <button class="dp-btn" data-filter="videos" title="Vidéos" aria-pressed="false">
  8378.       <i class="bi bi-camera-video-fill"></i><span class="dp-count" data-bind="video">0</span>
  8379.     </button>
  8380.     <button class="dp-btn" data-filter="favoris" title="Favoris" aria-pressed="false">
  8381.       <i class="bi bi-heart-fill" style="color:#f56040"></i><span class="dp-count" data-bind="fav">0</span>
  8382.     </button>
  8383.     <button class="dp-btn dp-close" title="Fermer" aria-label="Fermer">
  8384.       <i class="bi bi-x-lg"></i>
  8385.     </button>
  8386.   </div>
  8387. </div>
  8389. {# ==================== Zones B2C Suggestions ==================== #}
  8390. {# Sidebar suggestions (desktop) #}
  8391. <aside class="col-lg-3 d-none d-lg-block" style="position:sticky;top:100px;">
  8392.   <div id="parentSuggestions" class="pcb-sticky">
  8393.     {# Rempli dynamiquement par parent-b2c-nuke.js #}
  8394.   </div>
  8395. </aside>
  8397. {# Bloc suggestions mobile #}
  8398. <div class="col-12 d-lg-none mt-3">
  8399.   <div id="parentSuggestionsMobile">
  8400.     {# Rempli dynamiquement par parent-b2c-nuke.js #}
  8401.   </div>
  8402. </div>
  8404. {# ==================== SIDEBAR E-COMMERCE ==================== #}
  8405. <script src="{{ asset('js/sidebar-ecommerce-pro.js') }}"></script>
  8407. {% endblock %}