templates/evenement/sessionsFront.html.twig line 1

Open in your IDE?
  1. {% extends 'backfront.html.twig' %}
  3. {% block title %}Sessions de formation SIP Academy - Calendrier et inscription{% endblock %}
  5. {% block meta_description %}
  6.     Inscrivez-vous aux prochaines sessions de formation chez SIP Academy. Consultez le calendrier de nos cours en ligne et en présentiel et planifiez votre avenir.
  7. {% endblock %}
  9. {% block body %}
  10.     <style>
  11.         /* ===== COULEURS MODERNES ===== */
  12.         :root {
  13.             --gold: #FFAE27;
  14.             --gold-dark: #e09500;
  15.             --gold-light: #fff8e6;
  16.             --navy: #1F3971;
  17.             --navy-dark: #162d5a;
  18.             --navy-light: #e8edf8;
  19.             --text-dark: #1a2a3a;
  20.             --text-muted: #6c757d;
  21.             --border-light: #eef2f6;
  22.         }
  24.         /* ===== BREADCRUMB MODERNE ===== */
  25.         .breadcrumb-area {
  26.             background: linear-gradient(135deg, var(--navy) 0%, var(--navy-dark) 100%);
  27.             padding: 100px 0 120px;
  28.             position: relative;
  29.             text-align: center;
  30.         }
  31.         .breadcrumb-title h1 {
  32.             color: #fff;
  33.             font-size: 48px;
  34.             font-weight: 800;
  35.             margin-bottom: 10px;
  36.             letter-spacing: -1px;
  37.         }
  38.         .breadcrumb-list {
  39.             list-style: none;
  40.             padding: 0;
  41.             margin: 0;
  42.             display: flex;
  43.             justify-content: center;
  44.             gap: 15px;
  45.             align-items: center;
  46.         }
  47.         .breadcrumb-list li, .breadcrumb-list li a {
  48.             color: rgba(255,255,255,0.7);
  49.             font-size: 15px;
  50.             text-decoration: none;
  51.             transition: color 0.3s;
  52.         }
  53.         .breadcrumb-list li a:hover {
  54.             color: var(--gold);
  55.         }
  56.         .breadcrumb-list li.active {
  57.             color: var(--gold);
  58.         }
  59.         .breadcrumb-list li i {
  60.             font-size: 14px;
  61.             color: var(--gold);
  62.         }
  64.         /* ===== SEARCH BAR FLOATING MODERNE ===== */
  65.         .search-category {
  66.             margin-top: -60px;
  67.             position: relative;
  68.             z-index: 10;
  69.             padding-bottom: 20px;
  70.         }
  72.         .search-wrapper-glass {
  73.             background: #ffffff;
  74.             padding: 30px;
  75.             border-radius: 24px;
  76.             box-shadow: 0 15px 35px rgba(0,0,0,0.1);
  77.             border: 1px solid rgba(255,255,255,0.8);
  78.         }
  80.         .form-container-modern {
  81.             display: grid;
  82.             grid-template-columns: 2fr 1fr 1fr auto;
  83.             gap: 15px;
  84.             align-items: center;
  85.         }
  87.         .input-group-custom {
  88.             position: relative;
  89.             display: flex;
  90.             align-items: center;
  91.         }
  93.         .input-group-custom i {
  94.             position: absolute;
  95.             left: 15px;
  96.             color: var(--navy);
  97.             opacity: 0.5;
  98.             z-index: 5;
  99.         }
  101.         .input-group-custom input,
  102.         .input-group-custom select {
  103.             width: 100%;
  104.             padding: 15px 15px 15px 45px !important;
  105.             border: 1px solid #e2e8f0;
  106.             border-radius: 12px;
  107.             font-size: 14px;
  108.             background-color: #f8fafc;
  109.             transition: all 0.3s ease;
  110.             cursor: pointer;
  111.             appearance: none;
  112.         }
  114.         .input-group-custom input:focus,
  115.         .input-group-custom select:focus {
  116.             background: #fff;
  117.             border-color: var(--gold);
  118.             box-shadow: 0 0 0 4px rgba(255, 174, 39, 0.1);
  119.             outline: none;
  120.         }
  122.         .btn-search-modern {
  123.             background: var(--gold);
  124.             color: var(--navy);
  125.             border: none;
  126.             padding: 15px 35px;
  127.             border-radius: 12px;
  128.             font-weight: 700;
  129.             text-transform: uppercase;
  130.             letter-spacing: 0.5px;
  131.             cursor: pointer;
  132.             transition: all 0.3s ease;
  133.             display: flex;
  134.             align-items: center;
  135.             gap: 10px;
  136.             white-space: nowrap;
  137.         }
  139.         .btn-search-modern:hover {
  140.             background: var(--navy);
  141.             color: #fff;
  142.             transform: translateY(-2px);
  143.         }
  145.         /* ===== SECTION TITRES ===== */
  146.         .section-title-wrapper {
  147.             text-align: center;
  148.             margin-bottom: 50px;
  149.         }
  150.         .section-title h3 {
  151.             font-size: 36px;
  152.             font-weight: 800;
  153.             color: var(--text-dark);
  154.             margin-bottom: 12px;
  155.             position: relative;
  156.             display: inline-block;
  157.         }
  158.         .section-title h3::after {
  159.             content: '';
  160.             position: absolute;
  161.             bottom: -12px;
  162.             left: 50%;
  163.             transform: translateX(-50%);
  164.             width: 60px;
  165.             height: 4px;
  166.             background: linear-gradient(90deg, var(--gold), var(--gold-dark));
  167.             border-radius: 2px;
  168.         }
  169.         .section-title p {
  170.             font-size: 16px;
  171.             color: var(--text-muted);
  172.             margin-top: 20px;
  173.         }
  175.         /* ===== COURSE AREA ===== */
  176.         .course-area {
  177.             padding: 80px 0;
  178.             background: #fff;
  179.         }
  181.         /* CARTE SESSION - HAUTEUR ÉGALE */
  182.         .single-event-item {
  183.             background: #fff;
  184.             border-radius: 20px;
  185.             overflow: hidden;
  186.             box-shadow: 0 5px 20px rgba(0,0,0,0.05);
  187.             transition: all 0.3s cubic-bezier(0.4,0,0.2,1);
  188.             height: 100%;
  189.             display: flex;
  190.             flex-direction: column;
  191.             border: 1px solid var(--border-light);
  192.         }
  193.         .single-event-item:hover {
  194.             transform: translateY(-8px);
  195.             box-shadow: 0 20px 40px rgba(31,57,113,0.15);
  196.             border-color: var(--gold);
  197.         }
  199.         /* IMAGE */
  200.         .single-event-image {
  201.             position: relative;
  202.             overflow: hidden;
  203.             height: 220px;
  204.             background: linear-gradient(135deg, #f8faff 0%, #fff 100%);
  205.             display: flex;
  206.             align-items: center;
  207.             justify-content: center;
  208.         }
  209.         .single-event-image a {
  210.             display: flex;
  211.             align-items: center;
  212.             justify-content: center;
  213.             width: 100%;
  214.             height: 100%;
  215.         }
  216.         .single-event-image img {
  217.             width: auto;
  218.             height: auto;
  219.             max-width: 100%;
  220.             max-height: 100%;
  221.             object-fit: contain;
  222.             transition: transform 0.4s ease;
  223.         }
  224.         .single-event-item:hover .single-event-image img {
  225.             transform: scale(1.05);
  226.         }
  228.         /* BADGE DATE */
  229.         .single-event-image span {
  230.             position: absolute;
  231.             top: 15px;
  232.             left: 15px;
  233.             background: linear-gradient(135deg, var(--gold), var(--gold-dark));
  234.             color: var(--navy);
  235.             padding: 8px 16px;
  236.             border-radius: 12px;
  237.             font-weight: 800;
  238.             font-size: 14px;
  239.             z-index: 3;
  240.             box-shadow: 0 4px 15px rgba(255,174,39,0.3);
  241.             transition: all 0.3s ease;
  242.         }
  243.         .single-event-item:hover .single-event-image span {
  244.             transform: translateY(-3px);
  245.             box-shadow: 0 6px 20px rgba(255,174,39,0.4);
  246.         }
  248.         /* CORPS DE LA CARTE */
  249.         .single-event-text {
  250.             padding: 20px;
  251.             flex: 1;
  252.             display: flex;
  253.             flex-direction: column;
  254.         }
  255.         .single-event-text h3 {
  256.             font-size: 18px;
  257.             font-weight: 700;
  258.             margin-bottom: 12px;
  259.             line-height: 1.4;
  260.             min-height: 50px;
  261.         }
  262.         .single-event-text h3 a {
  263.             color: var(--text-dark);
  264.             text-decoration: none;
  265.             transition: color 0.2s;
  266.         }
  267.         .single-event-text h3 a:hover {
  268.             color: var(--gold);
  269.         }
  271.         /* INFOS SESSION (DATE + LIEU) */
  272.         .single-item-comment-view {
  273.             display: flex;
  274.             gap: 15px;
  275.             margin-bottom: 15px;
  276.             flex-wrap: wrap;
  277.         }
  278.         .single-item-comment-view span {
  279.             font-size: 12px;
  280.             color: var(--text-muted);
  281.             display: flex;
  282.             align-items: center;
  283.             gap: 6px;
  284.         }
  285.         .single-item-comment-view span i {
  286.             color: var(--gold);
  287.             font-size: 14px;
  288.         }
  290.         /* DESCRIPTION */
  291.         .single-event-text > p {
  292.             font-size: 13px;
  293.             color: var(--text-muted);
  294.             line-height: 1.6;
  295.             margin-bottom: 20px;
  296.             display: -webkit-box;
  297.             -webkit-line-clamp: 2;
  298.             -webkit-box-orient: vertical;
  299.             overflow: hidden;
  300.         }
  302.         /* BOUTON */
  303.         .button-default {
  304.             display: inline-flex;
  305.             align-items: center;
  306.             justify-content: center;
  307.             gap: 8px;
  308.             background: linear-gradient(135deg, var(--navy), var(--navy-dark));
  309.             color: #fff;
  310.             border: none;
  311.             padding: 10px 24px;
  312.             border-radius: 30px;
  313.             font-weight: 600;
  314.             font-size: 13px;
  315.             cursor: pointer;
  316.             transition: all 0.3s ease;
  317.             text-decoration: none;
  318.             margin-top: auto;
  319.             align-self: flex-start;
  320.         }
  321.         .button-default:hover {
  322.             background: linear-gradient(135deg, var(--gold), var(--gold-dark));
  323.             color: var(--navy);
  324.             transform: translateX(4px);
  325.         }
  327.         /* MESSAGE AUCUNE SESSION */
  328.         .no-sessions-message {
  329.             text-align: center;
  330.             padding: 60px 40px;
  331.             background: var(--surface-white);
  332.             border-radius: var(--r-lg);
  333.             border: 1px solid var(--border-light);
  334.             box-shadow: var(--sh-sm);
  335.             max-width: 500px;
  336.             margin: 0 auto;
  337.         }
  338.         .no-sessions-icon {
  339.             font-size: 64px;
  340.             color: var(--gold);
  341.             margin-bottom: 20px;
  342.         }
  343.         .no-sessions-message h3 {
  344.             font-size: 24px;
  345.             font-weight: 700;
  346.             color: var(--text-dark);
  347.             margin-bottom: 12px;
  348.         }
  349.         .no-sessions-message p {
  350.             font-size: 15px;
  351.             color: var(--text-muted);
  352.             margin-bottom: 25px;
  353.         }
  355.         /* PAGINATION */
  356.         .pagination-wrapper {
  357.             margin-top: 40px;
  358.             text-align: center;
  359.         }
  360.         .pagination {
  361.             display: flex;
  362.             justify-content: center;
  363.             gap: 8px;
  364.             list-style: none;
  365.             padding: 0;
  366.             margin: 0;
  367.         }
  368.         .pagination .page-item {
  369.             list-style: none;
  370.         }
  371.         .pagination .page-link {
  372.             display: flex;
  373.             align-items: center;
  374.             justify-content: center;
  375.             width: 40px;
  376.             height: 40px;
  377.             border-radius: 12px;
  378.             background: #fff;
  379.             border: 1px solid var(--border-light);
  380.             color: var(--navy);
  381.             font-weight: 500;
  382.             text-decoration: none;
  383.             transition: all 0.3s ease;
  384.         }
  385.         .pagination .page-link:hover {
  386.             background: var(--gold);
  387.             border-color: var(--gold);
  388.             color: var(--navy);
  389.         }
  390.         .pagination .active .page-link {
  391.             background: linear-gradient(135deg, var(--navy), var(--navy-dark));
  392.             border-color: var(--navy);
  393.             color: #fff;
  394.         }
  396.         /* RESPONSIVE */
  397.         @media (max-width: 991px) {
  398.             .form-container-modern {
  399.                 grid-template-columns: 1fr;
  400.             }
  401.             .breadcrumb-area {
  402.                 padding: 60px 0 100px;
  403.             }
  404.             .breadcrumb-title h1 {
  405.                 font-size: 32px;
  406.             }
  407.             .btn-search-modern {
  408.                 justify-content: center;
  409.             }
  410.         }
  412.         @media (max-width: 768px) {
  413.             .section-title h3 {
  414.                 font-size: 28px;
  415.             }
  416.             .single-event-image {
  417.                 height: 180px;
  418.             }
  419.             .single-event-text h3 {
  420.                 font-size: 16px;
  421.                 min-height: auto;
  422.             }
  423.             .pagination .page-link {
  424.                 width: 36px;
  425.                 height: 36px;
  426.                 font-size: 13px;
  427.             }
  428.             .single-item-comment-view {
  429.                 gap: 10px;
  430.             }
  431.         }
  433.         /* ===== BADGE DATE CENTRÉ SOUS L'IMAGE ===== */
  434.         .event-date-badge {
  435.             position: relative;
  436.             display: flex;
  437.             align-items: center;
  438.             justify-content: center;  /* Centrage horizontal */
  439.             background: linear-gradient(135deg, var(--gold), var(--gold-dark));
  440.             border-radius: 12px;
  441.             margin-top: 0;
  442.             margin-bottom: 15px;
  443.             padding: 8px 20px;
  444.             width: fit-content;
  445.             min-width: 80px;  /* Largeur minimum pour un bon centrage */
  446.             box-shadow: 0 4px 15px rgba(255,174,39,0.2);
  447.             transition: all 0.3s ease;
  448.             z-index: 5;
  449.             gap: 10px;
  450.             /* Centrage horizontal */
  451.             margin-left: auto;
  452.             margin-right: auto;
  453.         }
  455.         .single-event-item:hover .event-date-badge {
  456.             transform: translateY(-3px);
  457.             box-shadow: 0 8px 20px rgba(255,174,39,0.3);
  458.         }
  460.         .event-date-badge .event-day {
  461.             font-size: 22px;
  462.             font-weight: 800;
  463.             color: var(--navy);
  464.             line-height: 1;
  465.         }
  467.         .event-date-badge .event-month {
  468.             font-size: 12px;
  469.             font-weight: 600;
  470.             color: var(--navy);
  471.             text-transform: uppercase;
  472.             letter-spacing: 1px;
  473.         }
  475.         /* Style pour les sessions passées */
  476.         .event-date-badge.past {
  477.             background: linear-gradient(135deg, #6c757d, #495057);
  478.             box-shadow: 0 4px 15px rgba(108,117,125,0.2);
  479.         }
  481.         .event-date-badge.past .event-day,
  482.         .event-date-badge.past .event-month {
  483.             color: #fff;
  484.         }
  486.         .single-event-item:hover .event-date-badge.past {
  487.             box-shadow: 0 8px 20px rgba(108,117,125,0.3);
  488.         }
  490.         /* Ajustement de l'image */
  491.         .single-event-image {
  492.             position: relative;
  493.             overflow: hidden;
  494.             height: 220px;
  495.             background: linear-gradient(135deg, #f8faff 0%, #fff 100%);
  496.             display: flex;
  497.             align-items: center;
  498.             justify-content: center;
  499.             margin-bottom: 0;
  500.         }
  502.         /* Corps de la carte */
  503.         .single-event-text {
  504.             padding: 0 20px 20px 20px;
  505.             flex: 1;
  506.             display: flex;
  507.             flex-direction: column;
  508.         }
  510.         .single-event-text h3 {
  511.             font-size: 18px;
  512.             font-weight: 700;
  513.             margin-bottom: 12px;
  514.             margin-top: 0;
  515.             line-height: 1.4;
  516.             text-align: left;
  517.         }
  519.         /* Responsive */
  520.         @media (max-width: 768px) {
  521.             .event-date-badge {
  522.                 padding: 6px 16px;
  523.                 min-width: 70px;
  524.                 margin-bottom: 12px;
  525.             }
  526.             .event-date-badge .event-day {
  527.                 font-size: 18px;
  528.             }
  529.             .event-date-badge .event-month {
  530.                 font-size: 10px;
  531.             }
  532.             .single-event-text {
  533.                 padding: 0 15px 15px 15px;
  534.             }
  535.         }
  536.         /* =====================================================
  537.    PROCHAINES SESSIONS - SCROLLABLE HORIZONTAL
  538.    ===================================================== */
  540.         /* =====================================================
  541.            PROCHAINES SESSIONS - CARTES COMPACTES
  542.            ===================================================== */
  544.         /* Container des sessions avec défilement horizontal */
  545.         .sessions-scroll-wrapper {
  546.             position: relative;
  547.             margin: 30px 0;
  548.         }
  550.         .sessions-scroll-container {
  551.             position: relative;
  552.             display: flex;
  553.             align-items: center;
  554.             gap: 10px;
  555.         }
  557.         .sessions-scroll-btn {
  558.             width: 40px;
  559.             height: 40px;
  560.             border-radius: 50%;
  561.             background: white;
  562.             border: 1px solid var(--border-light);
  563.             color: var(--navy);
  564.             font-size: 18px;
  565.             cursor: pointer;
  566.             display: flex;
  567.             align-items: center;
  568.             justify-content: center;
  569.             transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  570.             flex-shrink: 0;
  571.             z-index: 10;
  572.             box-shadow: 0 2px 8px rgba(0,0,0,0.05);
  573.         }
  575.         .sessions-scroll-btn:hover {
  576.             background: var(--gold);
  577.             border-color: var(--gold);
  578.             color: var(--navy);
  579.             transform: scale(1.1);
  580.         }
  582.         .sessions-scroll-btn:disabled {
  583.             opacity: 0.4;
  584.             cursor: not-allowed;
  585.             transform: none;
  586.         }
  588.         .sessions-rail {
  589.             flex: 1;
  590.             overflow-x: auto;
  591.             scroll-behavior: smooth;
  592.             scrollbar-width: none;
  593.             -ms-overflow-style: none;
  594.             cursor: grab;
  595.             border-radius: 20px;
  596.         }
  598.         .sessions-rail::-webkit-scrollbar {
  599.             display: none;
  600.         }
  602.         .sessions-rail:active {
  603.             cursor: grabbing;
  604.         }
  606.         .sessions-belt {
  607.             display: flex;
  608.             gap: 20px;
  609.             width: max-content;
  610.             padding: 10px 5px;
  611.         }
  613.         /* CARTE SESSION - TAILLE COMPACTE (comme sessions passées) */
  614.         .sessions-card {
  615.             width: 300px;
  616.             flex-shrink: 0;
  617.         }
  619.         /* Garder les styles existants de la carte */
  620.         .single-event-item {
  621.             background: #fff;
  622.             border-radius: 20px;
  623.             overflow: hidden;
  624.             box-shadow: 0 5px 20px rgba(0,0,0,0.05);
  625.             transition: all 0.3s cubic-bezier(0.4,0,0.2,1);
  626.             height: 100%;
  627.             display: flex;
  628.             flex-direction: column;
  629.             border: 1px solid var(--border-light);
  630.         }
  632.         .single-event-item:hover {
  633.             transform: translateY(-5px);
  634.             box-shadow: 0 15px 30px rgba(31,57,113,0.15);
  635.         }
  637.         /* Image plus petite */
  638.         .single-event-image {
  639.             height: 180px;
  640.         }
  642.         /* Badge date plus petit */
  643.         .event-date-badge {
  644.             padding: 6px 14px;
  645.             min-width: 65px;
  646.             margin-bottom: 10px;
  647.         }
  649.         .event-date-badge .event-day {
  650.             font-size: 18px;
  651.         }
  653.         .event-date-badge .event-month {
  654.             font-size: 10px;
  655.         }
  657.         /* Corps de la carte - padding réduit */
  658.         .single-event-text {
  659.             padding: 0 15px 15px 15px;
  660.         }
  662.         .single-event-text h3 {
  663.             font-size: 16px;
  664.             margin-bottom: 8px;
  665.             min-height: auto;
  666.         }
  668.         .single-item-comment-view {
  669.             margin-bottom: 10px;
  670.             gap: 10px;
  671.         }
  673.         .single-item-comment-view span {
  674.             font-size: 11px;
  675.         }
  677.         .single-event-text > p {
  678.             font-size: 12px;
  679.             margin-bottom: 12px;
  680.             -webkit-line-clamp: 2;
  681.         }
  683.         .button-default {
  684.             padding: 8px 18px;
  685.             font-size: 12px;
  686.         }
  688.         /* Indicateur de progression */
  689.         .sessions-scroll-indicator {
  690.             display: flex;
  691.             justify-content: center;
  692.             margin-top: 20px;
  693.         }
  695.         .sessions-scroll-bar {
  696.             width: 60px;
  697.             height: 3px;
  698.             background: #e9ecef;
  699.             border-radius: 3px;
  700.             position: relative;
  701.             overflow: hidden;
  702.         }
  704.         .sessions-scroll-bar::after {
  705.             content: '';
  706.             position: absolute;
  707.             left: 0;
  708.             top: 0;
  709.             height: 100%;
  710.             width: 0%;
  711.             background: linear-gradient(90deg, var(--gold), var(--gold-dark));
  712.             border-radius: 3px;
  713.             transition: width 0.3s ease;
  714.         }
  716.         /* Responsive */
  717.         @media (max-width: 1200px) {
  718.             .sessions-card { width: 290px; }
  719.         }
  721.         @media (max-width: 992px) {
  722.             .sessions-card { width: 280px; }
  723.         }
  725.         @media (max-width: 768px) {
  726.             .sessions-scroll-btn { width: 36px; height: 36px; font-size: 16px; }
  727.             .sessions-card { width: 260px; }
  728.             .sessions-belt { gap: 12px; }
  729.             .single-event-image { height: 160px; }
  730.             .single-event-text h3 { font-size: 15px; }
  731.         }
  733.         @media (max-width: 576px) {
  734.             .sessions-scroll-btn { width: 32px; height: 32px; font-size: 14px; }
  735.             .sessions-card { width: 240px; }
  736.             .single-event-image { height: 140px; }
  737.             .single-event-text h3 { font-size: 14px; }
  738.             .event-date-badge .event-day { font-size: 16px; }
  739.         }
  740.     </style>
  742.     <!-- BREADCRUMB AREA -->
  743.     <div class="breadcrumb-area">
  744.         <div class="container">
  745.             <div class="row">
  746.                 <div class="col-md-12">
  747.                     <div class="breadcrumb-title">
  748.                         <h1>Sessions de Formation</h1>
  749.                         <ul class="breadcrumb-list">
  750.                             <li><a href="{{ path('app_home') }}">Accueil</a></li>
  751.                             <li><i class="zmdi zmdi-chevron-right"></i></li>
  752.                             <li class="active">Sessions</li>
  753.                         </ul>
  754.                     </div>
  755.                 </div>
  756.             </div>
  757.         </div>
  758.     </div>
  760.     <!-- SEARCH CATEGORY FLOATING -->
  763.     <!-- COURSE AREA - PROCHAINES SESSIONS -->
  764.     <!-- COURSE AREA - PROCHAINES SESSIONS -->
  765.     <div class="course-area">
  766.         <div class="container">
  767.             <!-- PROCHAINES SESSIONS - SCROLLABLE HORIZONTAL -->
  768.             <div class="sessions-scroll-wrapper">
  769.                 <div class="section-title-wrapper">
  770.                     <div class="section-title">
  771.                         <h3>Prochaines Sessions</h3>
  772.                         <p>Rejoignez nos prochaines sessions de formation</p>
  773.                     </div>
  774.                 </div>
  776.                 {% if evenements is empty %}
  777.                     <div class="no-sessions-message">
  778.                         <div class="no-sessions-icon">
  779.                             <i class="zmdi zmdi-calendar-close"></i>
  780.                         </div>
  781.                         <h3>Aucune session à venir</h3>
  782.                         <p>De nouvelles sessions seront programmées prochainement. Revenez bientôt !</p>
  783.                     </div>
  784.                 {% else %}
  785.                     <div class="sessions-scroll-container">
  786.                         <!-- Bouton gauche -->
  787.                         <button class="sessions-scroll-btn sessions-scroll-left" id="sessionsScrollLeft">
  788.                             <i class="zmdi zmdi-chevron-left"></i>
  789.                         </button>
  791.                         <!-- Rail scrollable -->
  792.                         <div class="sessions-rail" id="sessionsRail">
  793.                             <div class="sessions-belt">
  794.                                 {% for evenement in evenements %}
  795.                                     <div class="sessions-card">
  796.                                         <div class="single-event-item">
  797.                                             <div class="single-event-image">
  798.                                                 <a href="{{ path('app_details_session', {'slug': evenement.slug}) }}">
  799.                                                     {% if evenement.image %}
  800.                                                         <img src="{{ asset('uploads/evenement/' ~ evenement.image) }}" alt="{{ evenement.titre }}">
  801.                                                     {% elseif evenement.formation %}
  802.                                                         <img src="{{ asset('uploads/formation/' ~ evenement.formation.affiche) }}" alt="{{ evenement.titre }}">
  803.                                                     {% else %}
  804.                                                         <img src="{{ asset('assets2/img/placeholder.jpg') }}" alt="Image par défaut">
  805.                                                     {% endif %}
  806.                                                 </a>
  807.                                             </div>
  808.                                             <!-- BADGE DATE SOUS L'IMAGE -->
  809.                                             <div class="event-date-badge">
  810.                                                 <span class="event-day">{{ evenement.starttime|date('d') }}</span>
  811.                                                 <span class="event-month">{{ evenement.starttime|date('M') }}</span>
  812.                                             </div>
  813.                                             <div class="single-event-text">
  814.                                                 <h3><a href="{{ path('app_details_session', {'slug': evenement.slug}) }}">{{ evenement.titre }}</a></h3>
  815.                                                 <div class="single-item-comment-view">
  816.                                                     <span><i class="zmdi zmdi-time"></i> {{ evenement.starttime|date('d/m H:i') }} - {{ evenement.endtime|date('d/m H:i') }}</span>
  817.                                                     <span><i class="zmdi zmdi-pin"></i> {{ evenement.adresse }}</span>
  818.                                                 </div>
  819.                                                 <p>
  820.                                                     {{ evenement.descriptionshort|striptags|slice(0, 200)|raw }}
  821.                                                     {% if evenement.descriptionshort|striptags|length > 200 %}...{% endif %}
  822.                                                 </p>
  823.                                                 <a class="button-default" href="{{ path('app_details_session', {'slug': evenement.slug}) }}">
  824.                                                     Voir les détails
  825.                                                     <i class="zmdi zmdi-arrow-right"></i>
  826.                                                 </a>
  827.                                             </div>
  828.                                         </div>
  829.                                     </div>
  830.                                 {% endfor %}
  831.                             </div>
  832.                         </div>
  834.                         <!-- Bouton droit -->
  835.                         <button class="sessions-scroll-btn sessions-scroll-right" id="sessionsScrollRight">
  836.                             <i class="zmdi zmdi-chevron-right"></i>
  837.                         </button>
  838.                     </div>
  840.                     <!-- Indicateur de progression -->
  841.                     <div class="sessions-scroll-indicator">
  842.                         <div class="sessions-scroll-bar"></div>
  843.                     </div>
  844.                 {% endif %}
  845.             </div>
  849.             <!-- ANCIENNES SESSIONS -->
  850.             <!-- ANCIENNES SESSIONS -->
  851.             <div class="row mt-5">
  852.                 <div class="col-md-12">
  853.                     <div class="section-title-wrapper">
  854.                         <div class="section-title">
  855.                             <h3>Sessions Passées</h3>
  856.                             <p>Consultez nos sessions déjà réalisées</p>
  857.                         </div>
  858.                     </div>
  859.                 </div>
  860.             </div>
  862.             <div class="row">
  863.                 {% if ancienevents is empty %}
  864.                     <div class="col-md-12">
  865.                         <div class="no-sessions-message">
  866.                             <div class="no-sessions-icon">
  867.                                 <i class="zmdi zmdi-history"></i>
  868.                             </div>
  869.                             <h3>Aucune session passée</h3>
  870.                             <p>Les sessions passées apparaîtront ici.</p>
  871.                         </div>
  872.                     </div>
  873.                 {% else %}
  874.                     {% for evenement in ancienevents %}
  875.                         <div class="col-lg-4 col-md-6 col-12 mb-4 d-flex">
  876.                             <div class="single-event-item w-100">
  877.                                 <div class="single-event-image">
  878.                                     <a href="{{ path('app_details_session', {'slug': evenement.slug}) }}">
  879.                                         {% if evenement.image %}
  880.                                             <img src="{{ asset('uploads/evenement/' ~ evenement.image) }}" alt="{{ evenement.titre }}">
  881.                                         {% elseif evenement.formation %}
  882.                                             <img src="{{ asset('uploads/formation/' ~ evenement.formation.affiche) }}" alt="{{ evenement.titre }}">
  883.                                         {% else %}
  884.                                             <img src="{{ asset('assets2/img/placeholder.jpg') }}" alt="Image par défaut">
  885.                                         {% endif %}
  886.                                     </a>
  887.                                 </div>
  888.                                 <!-- BADGE DATE POUR SESSIONS PASSÉES (STYLE GRIS) -->
  889.                                 <div class="event-date-badge past">
  890.                                     <span class="event-day">{{ evenement.starttime|date('d') }}</span>
  891.                                     <span class="event-month">{{ evenement.starttime|date('M') }}</span>
  892.                                 </div>
  893.                                 <div class="single-event-text">
  894.                                     <h3><a href="{{ path('app_details_session', {'slug': evenement.slug}) }}">{{ evenement.titre }}</a></h3>
  895.                                     <div class="single-item-comment-view">
  896.                                         <span><i class="zmdi zmdi-time"></i> {{ evenement.starttime|date('d/m H:i') }} - {{ evenement.endtime|date('d/m H:i') }}</span>
  897.                                         <span><i class="zmdi zmdi-pin"></i> {{ evenement.adresse }}</span>
  898.                                     </div>
  899.                                     <p>
  900.                                         {{ evenement.descriptionshort|striptags|slice(0, 200)|raw }}
  901.                                         {% if evenement.descriptionshort|striptags|length > 200 %}...{% endif %}
  902.                                     </p>
  903.                                     <a class="button-default" href="{{ path('app_details_session', {'slug': evenement.slug}) }}">
  904.                                         Voir les détails
  905.                                         <i class="zmdi zmdi-arrow-right"></i>
  906.                                     </a>
  907.                                 </div>
  908.                             </div>
  909.                         </div>
  910.                     {% endfor %}
  911.                 {% endif %}
  912.             </div>
  914.             <!-- PAGINATION POUR SESSIONS PASSÉES -->
  915.             {% if ancienevents is defined and ancienevents.pageCount > 1 %}
  916.                 <div class="row">
  917.                     <div class="col-12">
  918.                         <div class="pagination-wrapper">
  919.                             {{ knp_pagination_render(ancienevents, 'formation/custom_pagination.html.twig') }}
  920.                         </div>
  921.                     </div>
  922.                 </div>
  923.             {% endif %}
  924.         </div>
  925.     </div>
  927.     <script>
  929.         /* ============================================
  930.    SESSIONS - SCROLL HORIZONTAL
  931.    ============================================ */
  932.         (function() {
  933.             const container = document.getElementById('sessionsRail');
  934.             if (!container) return;
  936.             const leftBtn = document.getElementById('sessionsScrollLeft');
  937.             const rightBtn = document.getElementById('sessionsScrollRight');
  938.             const scrollBar = document.querySelector('.sessions-scroll-bar');
  940.             function getScrollAmount() {
  941.                 const firstCard = document.querySelector('.sessions-card');
  942.                 if (firstCard) {
  943.                     const cardWidth = firstCard.offsetWidth;
  944.                     const belt = document.querySelector('.sessions-belt');
  945.                     const gap = belt ? parseInt(getComputedStyle(belt).gap) || 25 : 25;
  946.                     return cardWidth + gap;
  947.                 }
  948.                 return 345;
  949.             }
  951.             function scrollLeft() {
  952.                 const amount = getScrollAmount();
  953.                 container.scrollBy({ left: -amount, behavior: 'smooth' });
  954.                 setTimeout(updateScrollBar, 350);
  955.                 setTimeout(checkButtons, 350);
  956.             }
  958.             function scrollRight() {
  959.                 const amount = getScrollAmount();
  960.                 container.scrollBy({ left: amount, behavior: 'smooth' });
  961.                 setTimeout(updateScrollBar, 350);
  962.                 setTimeout(checkButtons, 350);
  963.             }
  965.             function updateScrollBar() {
  966.                 if (!scrollBar) return;
  967.                 const maxScroll = container.scrollWidth - container.clientWidth;
  968.                 const currentScroll = container.scrollLeft;
  969.                 if (maxScroll > 0) {
  970.                     const percentage = (currentScroll / maxScroll) * 100;
  971.                     scrollBar.style.setProperty('--scroll-width', percentage + '%');
  972.                     const afterElement = scrollBar.querySelector('::after');
  973.                     if (afterElement) afterElement.style.width = percentage + '%';
  974.                 }
  975.             }
  977.             function checkButtons() {
  978.                 if (!leftBtn || !rightBtn) return;
  979.                 const maxScroll = container.scrollWidth - container.clientWidth;
  980.                 const currentScroll = container.scrollLeft;
  982.                 leftBtn.disabled = currentScroll <= 10;
  983.                 leftBtn.style.opacity = currentScroll <= 10 ? '0.4' : '1';
  985.                 rightBtn.disabled = currentScroll >= maxScroll - 10;
  986.                 rightBtn.style.opacity = currentScroll >= maxScroll - 10 ? '0.4' : '1';
  987.             }
  989.             if (leftBtn) leftBtn.addEventListener('click', scrollLeft);
  990.             if (rightBtn) rightBtn.addEventListener('click', scrollRight);
  992.             // Drag to scroll
  993.             let isDown = false;
  994.             let startX;
  995.             let scrollLeftPos;
  997.             container.addEventListener('mousedown', (e) => {
  998.                 isDown = true;
  999.                 container.style.cursor = 'grabbing';
  1000.                 startX = e.pageX - container.offsetLeft;
  1001.                 scrollLeftPos = container.scrollLeft;
  1002.             });
  1004.             container.addEventListener('mouseleave', () => {
  1005.                 isDown = false;
  1006.                 container.style.cursor = 'grab';
  1007.             });
  1009.             container.addEventListener('mouseup', () => {
  1010.                 isDown = false;
  1011.                 container.style.cursor = 'grab';
  1012.                 setTimeout(checkButtons, 100);
  1013.             });
  1015.             container.addEventListener('mousemove', (e) => {
  1016.                 if (!isDown) return;
  1017.                 e.preventDefault();
  1018.                 const x = e.pageX - container.offsetLeft;
  1019.                 const walk = (x - startX) * 1.5;
  1020.                 container.scrollLeft = scrollLeftPos - walk;
  1021.                 updateScrollBar();
  1022.             });
  1024.             container.addEventListener('scroll', () => {
  1025.                 updateScrollBar();
  1026.                 checkButtons();
  1027.             });
  1029.             window.addEventListener('resize', () => {
  1030.                 setTimeout(() => {
  1031.                     updateScrollBar();
  1032.                     checkButtons();
  1033.                 }, 200);
  1034.             });
  1036.             setTimeout(() => {
  1037.                 updateScrollBar();
  1038.                 checkButtons();
  1039.             }, 500);
  1040.         })();
  1041.     </script>
  1042. {% endblock %}