{"id":3008,"date":"2022-10-23T14:28:22","date_gmt":"2022-10-23T12:28:22","guid":{"rendered":"https:\/\/cadetsgendarmerie01.fr\/?page_id=3008"},"modified":"2025-11-11T16:25:39","modified_gmt":"2025-11-11T15:25:39","slug":"vie-promotions","status":"publish","type":"page","link":"https:\/\/cadetsgendarmerie01.fr\/index.php\/vie-promotions\/","title":{"rendered":"La vie des Promotions"},"content":{"rendered":"<div data-colibri-id=\"3008-c1\" class=\"style-4360 style-local-3008-c1 position-relative\">\r\n  <!---->\r\n  <div data-colibri-component=\"section\" data-colibri-id=\"3008-c2\" id=\"initial-content\" class=\"h-section h-section-global-spacing d-flex align-items-lg-center align-items-md-center align-items-center style-4361 style-local-3008-c2 position-relative\">\r\n    <!---->\r\n    <!---->\r\n    <div class=\"h-section-grid-container h-section-boxed-container\">\r\n      <!---->\r\n      <div data-colibri-id=\"3008-c3\" class=\"h-row-container gutters-row-lg-2 gutters-row-md-2 gutters-row-0 gutters-row-v-lg-2 gutters-row-v-md-2 gutters-row-v-2 style-4365 style-local-3008-c3 position-relative\">\r\n        <!---->\r\n        <div class=\"h-row justify-content-lg-center justify-content-md-center justify-content-center align-items-lg-stretch align-items-md-stretch align-items-stretch gutters-col-lg-2 gutters-col-md-2 gutters-col-0 gutters-col-v-lg-2 gutters-col-v-md-2 gutters-col-v-2\">\r\n          <!---->\r\n          <div class=\"h-column h-column-container d-flex h-col-lg-auto h-col-md-auto h-col-auto style-4366-outer style-local-3008-c4-outer\">\r\n            <div data-colibri-id=\"3008-c4\" class=\"d-flex h-flex-basis h-column__inner h-px-lg-2 h-px-md-2 h-px-2 v-inner-lg-2 v-inner-md-2 v-inner-2 style-4366 style-local-3008-c4 position-relative\">\r\n              <!---->\r\n              <!---->\r\n              <div class=\"w-100 h-y-container h-column__content h-column__v-align flex-basis-100 align-self-lg-start align-self-md-start align-self-start\">\r\n                <!---->\r\n                <div data-colibri-id=\"3008-c5\" class=\"style-4367 style-local-3008-c5 position-relative h-element\">\r\n                  <!---->\r\n                  <div class=\"\">\r\n                    <section class=\"promos-a1\">\r\n\r\n                      <header class=\"head\">\r\n                        <h1>La vie des promotions<\/h1>\r\n                      <\/header>\r\n\r\n                      <!-- Carte frise -->\r\n                      <div class=\"timeline-card\" aria-label=\"Frise des promotions\">\r\n                        <button class=\"nav prev\" aria-label=\"Promotion pr\u00e9c\u00e9dente\" disabled=\"\">\u2039<\/button>\r\n\r\n                        <div class=\"timeline\">\r\n                          <!-- HORIZONTAL (desktop) -->\r\n                          <div class=\"rail rail--h\"><\/div>\r\n                          <div class=\"progress progress--h\"><\/div>\r\n\r\n                          <!-- NODES -->\r\n                          <div class=\"nodes\" role=\"tablist\" aria-orientation=\"horizontal\">\r\n                            <!-- 2021\/2022 -->\r\n                            <button class=\"node\" role=\"tab\" aria-selected=\"false\" data-id=\"2021-2022\" data-year=\"2021\" data-title=\"Promotion 2021\/2022 \u00ab ROUSSET Roger \u00bb\" data-link=\"https:\/\/cadetsgendarmerie01.fr\/index.php\/promo-rr\/\" data-img=\"https:\/\/cadetsgendarmerie01.fr\/wp-content\/uploads\/2022\/02\/Roger-ROUSSET.png\">\r\n                              <span class=\"dot\" aria-hidden=\"true\"><i><\/i><\/span>\r\n                              <div class=\"pill\">\r\n                                <span class=\"name\">ROUSSET Roger<\/span>\r\n                                <span class=\"badge yr\">2021<\/span>\r\n                              <\/div>\r\n                              <div class=\"detail-inline\" aria-hidden=\"true\"><\/div>\r\n                            <\/button>\r\n\r\n                            <!-- 2022\/2023 -->\r\n                            <button class=\"node\" role=\"tab\" aria-selected=\"false\" data-id=\"2022-2023\" data-year=\"2022\" data-title=\"Promotion 2022\/2023 \u00ab GUY Jean-Marie \u00bb\" data-link=\"https:\/\/cadetsgendarmerie01.fr\/index.php\/promo-gjm\/\" data-img=\"https:\/\/cadetsgendarmerie01.fr\/wp-content\/uploads\/2022\/10\/Portrait-GUY-Jean-Marie.png\">\r\n                              <span class=\"dot\" aria-hidden=\"true\"><i><\/i><\/span>\r\n                              <div class=\"pill\">\r\n                                <span class=\"name\">GUY Jean-Marie<\/span>\r\n                                <span class=\"badge yr\">2022<\/span>\r\n                              <\/div>\r\n                              <div class=\"detail-inline\" aria-hidden=\"true\"><\/div>\r\n                            <\/button>\r\n\r\n                            <!-- 2023\/2024 -->\r\n                            <button class=\"node\" role=\"tab\" aria-selected=\"false\" data-id=\"2023-2024\" data-year=\"2023\" data-title=\"Promotion 2023\/2024 \u00ab BERTRAND Beno\u00eet \u00bb\" data-link=\"https:\/\/cadetsgendarmerie01.fr\/index.php\/promo-bb\/\" data-img=\"https:\/\/cadetsgendarmerie01.fr\/wp-content\/uploads\/2023\/08\/Adjudant-BERTRAND-Benoit.png\">\r\n                              <span class=\"dot\" aria-hidden=\"true\"><i><\/i><\/span>\r\n                              <div class=\"pill\">\r\n                                <span class=\"name\">BERTRAND Beno\u00eet<\/span>\r\n                                <span class=\"badge yr\">2023<\/span>\r\n                              <\/div>\r\n                              <div class=\"detail-inline\" aria-hidden=\"true\"><\/div>\r\n                            <\/button>\r\n\r\n                            <!-- 2024\/2025 -->\r\n                            <button class=\"node\" role=\"tab\" aria-selected=\"false\" data-id=\"2024-2025\" data-year=\"2024\" data-title=\"Promotion 2024\/2025 \u00ab LEMESRE Marcel \u00bb\" data-link=\"https:\/\/cadetsgendarmerie01.fr\/index.php\/promo-lm\/\" data-img=\"https:\/\/cadetsgendarmerie01.fr\/wp-content\/uploads\/2024\/10\/Image-GEND-Marcel-LEMESRE.png\">\r\n                              <span class=\"dot\" aria-hidden=\"true\"><i><\/i><\/span>\r\n                              <div class=\"pill\">\r\n                                <span class=\"name\">LEMESRE Marcel<\/span>\r\n                                <span class=\"badge yr\">2024<\/span>\r\n                              <\/div>\r\n                              <div class=\"detail-inline\" aria-hidden=\"true\"><\/div>\r\n                            <\/button>\r\n\r\n                            <!-- 2025\/2026 -->\r\n                            <button class=\"node\" role=\"tab\" aria-selected=\"false\" data-id=\"2025-2026\" data-year=\"2025\" data-title=\"Promotion 2025\/2026 \u00ab ROLLOT Andr\u00e9 \u00bb\" data-link=\"https:\/\/cadetsgendarmerie01.fr\/index.php\/promo-ra\/\" data-img=\"https:\/\/cadetsgendarmerie01.fr\/wp-content\/uploads\/2025\/08\/cropped-Portrait-gendarme-Andre-ROLLOT.png\">\r\n                              <span class=\"dot\" aria-hidden=\"true\"><i><\/i><\/span>\r\n                              <div class=\"pill\">\r\n                                <span class=\"name\">ROLLOT Andr\u00e9<\/span>\r\n                                <span class=\"badge yr\">2025<\/span>\r\n                              <\/div>\r\n                              <div class=\"detail-inline\" aria-hidden=\"true\"><\/div>\r\n                            <\/button>\r\n                          <\/div>\r\n                        <\/div>\r\n\r\n                        <button class=\"nav next\" aria-label=\"Promotion suivante\">\u203a<\/button>\r\n                      <\/div>\r\n\r\n                      <!-- D\u00e9tail (desktop) -->\r\n                      <div class=\"detail\" aria-live=\"polite\">\r\n                        <div class=\"fallback\">S\u00e9lectionnez une promotion pour voir le d\u00e9tail.<\/div>\r\n                      <\/div>\r\n\r\n                    <\/section>\r\n\r\n                    <style>\r\n                      :root {\r\n                        --blue: #0B2B55;\r\n                        --red: #FF0000;\r\n                        --ink: #0f172a;\r\n                        --rail: #dbe3ee;\r\n                        --card: #ffffff;\r\n                        --bg: #f6f9fc;\r\n                        --radius: 16px;\r\n                        --shadow: 0 18px 40px rgba(13, 38, 76, .10);\r\n                      }\r\n\r\n                      .promos-a1 {\r\n                        color: var(--ink);\r\n                        font-size: 18px;\r\n                        line-height: 1.6;\r\n                        background: linear-gradient(180deg, #fff, var(--bg));\r\n                        padding-bottom: 8px;\r\n                      }\r\n\r\n                      .head {\r\n                        text-align: center;\r\n                        max-width: 980px;\r\n                        margin: 0 auto 14px;\r\n                        padding: 0 12px;\r\n                      }\r\n\r\n                      .head h1 {\r\n                        margin: 0 0 6px;\r\n                        color: var(--blue);\r\n                        font-size: clamp(28px, 4vw, 44px);\r\n                        font-weight: 800;\r\n                      }\r\n\r\n                      \/* ====== FRise \u2013 carte ====== *\/\r\n\r\n                      .timeline-card {\r\n                        max-width: 1180px;\r\n                        margin: 8px auto 22px;\r\n                        padding: 24px 18px;\r\n                        background: var(--card);\r\n                        border: 1px solid #edf2f7;\r\n                        border-radius: var(--radius);\r\n                        box-shadow: var(--shadow);\r\n                        display: grid;\r\n                        grid-template-columns: 48px 1fr 48px;\r\n                        align-items: center;\r\n                        gap: 6px;\r\n                      }\r\n\r\n                      .nav {\r\n                        width: 44px;\r\n                        height: 44px;\r\n                        border-radius: 999px;\r\n                        border: 1px solid #e7eef6;\r\n                        background: #fff;\r\n                        display: grid;\r\n                        place-items: center;\r\n                        font-size: 22px;\r\n                        font-weight: 900;\r\n                        color: var(--blue);\r\n                        box-shadow: 0 10px 24px rgba(0, 0, 0, .08);\r\n                        cursor: pointer;\r\n                        transition: transform .15s ease, box-shadow .2s ease, opacity .2s ease;\r\n                      }\r\n\r\n                      .nav[disabled] {\r\n                        opacity: .35;\r\n                        cursor: not-allowed;\r\n                        box-shadow: none;\r\n                      }\r\n\r\n                      .nav:hover:not([disabled]) {\r\n                        transform: translateY(-1px);\r\n                        box-shadow: 0 12px 28px rgba(0, 0, 0, .12);\r\n                      }\r\n\r\n                      \/* ====== Desktop: horizontal ====== *\/\r\n\r\n                      .timeline {\r\n                        position: relative;\r\n                      }\r\n\r\n                      .rail--h {\r\n                        position: absolute;\r\n                        left: 0;\r\n                        right: 0;\r\n                        top: 54px;\r\n                        height: 3px;\r\n                        background: var(--rail);\r\n                        border-radius: 2px;\r\n                        z-index: 0;\r\n                      }\r\n\r\n                      .progress--h {\r\n                        position: absolute;\r\n                        left: 0;\r\n                        top: 54px;\r\n                        height: 3px;\r\n                        width: 0px;\r\n                        background: var(--blue);\r\n                        border-radius: 2px;\r\n                        z-index: 1;\r\n                      }\r\n\r\n                      .nodes {\r\n                        position: relative;\r\n                        z-index: 2;\r\n                        display: flex;\r\n                        justify-content: space-between;\r\n                        align-items: flex-start;\r\n                        gap: 24px;\r\n                        padding: 0 6px;\r\n                      }\r\n\r\n                      .node {\r\n                        position: relative;\r\n                        background: none;\r\n                        border: 0;\r\n                        padding: 0;\r\n                        cursor: pointer;\r\n                        font: inherit;\r\n                        text-align: left;\r\n                      }\r\n\r\n                      .node:focus-visible {\r\n                        outline: 3px solid #cfe3ff;\r\n                        outline-offset: 6px;\r\n                        border-radius: 8px;\r\n                      }\r\n\r\n                      \/* Desktop look (chips flottantes) *\/\r\n\r\n                      .pill {\r\n                        display: none;\r\n                      }\r\n\r\n                      \/* on n\u2019affiche pas les pills en desktop *\/\r\n\r\n                      .node .dot {\r\n                        position: relative;\r\n                        margin-top: 43px;\r\n                        width: 22px;\r\n                        height: 22px;\r\n                        border-radius: 50%;\r\n                        background: #fff;\r\n                        border: 3px solid var(--blue);\r\n                        box-shadow: 0 0 0 3px #fff;\r\n                        display: grid;\r\n                        place-items: center;\r\n                        transition: transform .25s, border-color .2s, background .2s;\r\n                      }\r\n\r\n                      .dot i {\r\n                        width: 8px;\r\n                        height: 8px;\r\n                        border-radius: 50%;\r\n                        background: transparent;\r\n                        transition: background .2s, transform .2s;\r\n                        display: block;\r\n                      }\r\n\r\n                      .node.is-done .dot i {\r\n                        background: var(--blue);\r\n                        transform: scale(1.05);\r\n                      }\r\n\r\n                      .node.is-active .dot {\r\n                        border-color: var(--red);\r\n                        background: #fff;\r\n                        transform: scale(1.12);\r\n                      }\r\n\r\n                      .node.is-active .dot i {\r\n                        background: var(--red);\r\n                      }\r\n\r\n                      \/* D\u00e9tail (desktop) *\/\r\n\r\n                      .detail {\r\n                        max-width: 1180px;\r\n                        margin: 12px auto 28px;\r\n                        padding: 0 8px;\r\n                      }\r\n\r\n                      .card {\r\n                        display: grid;\r\n                        grid-template-columns: 1.25fr 2fr;\r\n                        gap: 18px;\r\n                        background: var(--card);\r\n                        border: 1px solid #edf2f7;\r\n                        border-radius: var(--radius);\r\n                        box-shadow: var(--shadow);\r\n                        padding: 18px;\r\n                      }\r\n\r\n                      .card .media {\r\n                        width: 100%;\r\n                        background: #fff;\r\n                        border: 1px solid #edf2f7;\r\n                        border-radius: 14px;\r\n                        padding: 10px;\r\n                        display: grid;\r\n                        place-items: center;\r\n                      }\r\n\r\n                      .card .media img {\r\n                        width: 100%;\r\n                        height: clamp(240px, 26vw, 360px);\r\n                        object-fit: contain;\r\n                        border-radius: 10px;\r\n                        background: #fff;\r\n                      }\r\n\r\n                      .card h2 {\r\n                        margin: 2px 0 4px;\r\n                        color: var(--blue);\r\n                        font-size: clamp(22px, 3.2vw, 32px);\r\n                        font-weight: 800;\r\n                      }\r\n\r\n                      .actions {\r\n                        margin-top: 14px;\r\n                        display: flex;\r\n                        gap: 12px;\r\n                        flex-wrap: wrap;\r\n                      }\r\n\r\n                      .btn {\r\n                        display: inline-flex;\r\n                        align-items: center;\r\n                        gap: 10px;\r\n                        background: var(--blue);\r\n                        color: #fff;\r\n                        text-decoration: none;\r\n                        font-weight: 900;\r\n                        padding: 12px 20px;\r\n                        border-radius: 999px;\r\n                        border: 2px solid transparent;\r\n                        box-shadow: 0 12px 28px rgba(11, 43, 85, .18);\r\n                        transition: transform .15s ease, background .15s ease;\r\n                      }\r\n\r\n                      .btn:hover {\r\n                        background: #143a6b;\r\n                        transform: translateY(-1px);\r\n                      }\r\n\r\n                      .tag {\r\n                        display: inline-flex;\r\n                        align-items: center;\r\n                        background: #fff5f5;\r\n                        color: var(--red);\r\n                        border: 1px solid #ffd7d7;\r\n                        border-radius: 999px;\r\n                        padding: 8px 12px;\r\n                        font-weight: 800;\r\n                      }\r\n\r\n                      \/* ====== Mobile: vertical \u00e9l\u00e9gant ====== *\/\r\n\r\n                      @media (max-width:820px) {\r\n                        .rail--h,\r\n                        .progress--h {\r\n                          display: none;\r\n                        }\r\n                        .timeline-card {\r\n                          grid-template-columns: 40px 1fr 40px;\r\n                          padding: 18px 12px;\r\n                        }\r\n                        .nodes {\r\n                          display: block;\r\n                          padding: 4px 8px 4px 24px;\r\n                          \/* marge pour la ligne *\/\r\n                        }\r\n                        \/* Ligne verticale *\/\r\n                        .nodes::before {\r\n                          content: \"\";\r\n                          position: absolute;\r\n                          left: 30px;\r\n                          top: 10px;\r\n                          bottom: 10px;\r\n                          width: 3px;\r\n                          background: var(--rail);\r\n                          border-radius: 2px;\r\n                        }\r\n                        .node {\r\n                          display: grid;\r\n                          grid-template-columns: 52px 1fr;\r\n                          gap: 10px;\r\n                          align-items: center;\r\n                          padding: 6px 2px 14px 0;\r\n                          width: 100%;\r\n                        }\r\n                        .node+.node {\r\n                          margin-top: 10px;\r\n                        }\r\n                        \/* Pastille align\u00e9e sur la ligne *\/\r\n                        .node .dot {\r\n                          grid-column: 1;\r\n                          justify-self: center;\r\n                          width: 22px;\r\n                          height: 22px;\r\n                          margin: 0;\r\n                          border-radius: 50%;\r\n                          background: #fff;\r\n                          border: 3px solid var(--blue);\r\n                          box-shadow: 0 0 0 3px #fff;\r\n                        }\r\n                        .node.is-done .dot i {\r\n                          background: var(--blue);\r\n                          transform: scale(1.05);\r\n                        }\r\n                        .node.is-active .dot {\r\n                          border-color: var(--red);\r\n                        }\r\n                        .node.is-active .dot i {\r\n                          background: var(--red);\r\n                        }\r\n                        \/* PILL propre : nom + badge ann\u00e9e *\/\r\n                        .pill {\r\n                          grid-column: 2;\r\n                          position: relative;\r\n                          display: flex;\r\n                          align-items: center;\r\n                          justify-content: space-between;\r\n                          gap: 12px;\r\n                          width: 100%;\r\n                          background: #fff;\r\n                          border: 1px solid #e6edf7;\r\n                          border-radius: 999px;\r\n                          padding: 12px 16px;\r\n                          box-shadow: 0 6px 18px rgba(13, 38, 76, .08);\r\n                        }\r\n                        .pill .name {\r\n                          font-weight: 900;\r\n                          color: var(--blue);\r\n                          letter-spacing: .2px;\r\n                        }\r\n                        .pill .badge {\r\n                          display: inline-block;\r\n                          font-weight: 800;\r\n                          font-size: 13px;\r\n                          padding: 6px 10px;\r\n                          border-radius: 999px;\r\n                          background: #eef3ff;\r\n                          color: var(--blue);\r\n                          border: 1px solid #d9e4ff;\r\n                        }\r\n                        .node.is-active .pill {\r\n                          background: var(--red);\r\n                          border-color: #ffbcbc;\r\n                          box-shadow: 0 10px 24px rgba(255, 0, 0, .18);\r\n                        }\r\n                        .node.is-active .pill .name {\r\n                          color: #fff;\r\n                        }\r\n                        .node.is-active .pill .badge {\r\n                          background: #fff;\r\n                          color: var(--red);\r\n                          border-color: #ffe1e1;\r\n                        }\r\n                        \/* D\u00e9tail inline sous l\u2019item actif *\/\r\n                        .detail {\r\n                          display: none;\r\n                        }\r\n                        \/* on n\u2019utilise plus la zone globale en mobile *\/\r\n                        .detail-inline {\r\n                          grid-column: 2;\r\n                          display: none;\r\n                          margin-top: 10px;\r\n                        }\r\n                        .detail-inline .card {\r\n                          grid-template-columns: 1fr;\r\n                        }\r\n                        .detail-inline .media img {\r\n                          height: clamp(220px, 52vw, 420px);\r\n                        }\r\n                      }\r\n\r\n                      \/* Petits t\u00e9l\u00e9phones : un peu plus d\u2019air *\/\r\n\r\n                      @media (max-width:520px) {\r\n                        .node {\r\n                          grid-template-columns: 56px 1fr;\r\n                        }\r\n                        .pill {\r\n                          padding: 14px 18px;\r\n                        }\r\n                        .pill .name {\r\n                          font-size: 16px;\r\n                        }\r\n                      }\r\n\r\n                      @media (prefers-reduced-motion: reduce) {\r\n                        .nav,\r\n                        .btn,\r\n                        .pill,\r\n                        .dot {\r\n                          transition: none !important;\r\n                        }\r\n                      }\r\n                    <\/style>\r\n\r\n                    <script>\r\n                      (function() {\r\n                        function onReady(fn) {\r\n                          if (document.readyState !== 'loading') fn();\r\n                          else document.addEventListener('DOMContentLoaded', fn);\r\n                        }\r\n                        onReady(function() {\r\n                          var root = document.querySelector('.promos-a1');\r\n                          if (!root) return;\r\n\r\n                          var nodesWrap = root.querySelector('.nodes');\r\n                          var nodeList = nodesWrap.querySelectorAll('.node');\r\n                          if (!nodeList.length) return;\r\n                          var nodes = Array.prototype.slice.call(nodeList);\r\n\r\n                          \/\/ Tri par ann\u00e9e croissante\r\n                          nodes.sort(function(a, b) {\r\n                            return (parseInt(a.getAttribute('data-year')) || 0) - (parseInt(b.getAttribute('data-year')) || 0);\r\n                          }).forEach(function(n) {\r\n                            nodesWrap.appendChild(n);\r\n                          });\r\n\r\n                          var progressH = root.querySelector('.progress--h');\r\n                          var railH = root.querySelector('.rail--h');\r\n                          var btnPrev = root.querySelector('.prev');\r\n                          var btnNext = root.querySelector('.next');\r\n                          var detailGlobal = root.querySelector('.detail');\r\n                          var fallbackImg = \"https:\/\/cadetsgendarmerie01.fr\/wp-content\/uploads\/2021\/11\/cropped-3EME-JOUR-DU-STAGE-35-scaled-1.jpg\";\r\n\r\n                          function renderCard(node) {\r\n                            var id = node.getAttribute('data-id');\r\n                            var title = node.getAttribute('data-title') || ('Promotion ' + id);\r\n                            var link = node.getAttribute('data-link') || '#';\r\n                            var img = node.getAttribute('data-img') || '';\r\n                            if (!img.trim()) img = fallbackImg;\r\n\r\n                            return '' +\r\n                              '<article id=\"panel-' + id + '\" class=\"card\" role=\"tabpanel\" tabindex=\"-1\">' +\r\n                              '<div class=\"media\"><img decoding=\"async\" src=\"' + img + '\" alt=\"\"><\/div>' +\r\n                              '<div>' +\r\n                              '<h2>' + title + '<\/h2>' +\r\n                              '<div class=\"actions\">' +\r\n                              '<a class=\"btn\" href=\"' + link + '\">Voir la promotion <span aria-hidden=\"true\">\u203a<\/span><\/a>' +\r\n                              '<span class=\"tag\">Promo ' + id + '<\/span>' +\r\n                              '<\/div>' +\r\n                              '<\/div>' +\r\n                              '<\/article>';\r\n                          }\r\n\r\n                          \/\/ Desktop: progression centre->centre\r\n                          function updateProgressH(i) {\r\n                            if (!progressH || !railH) return;\r\n                            if (window.innerWidth <= 820) {\r\n                              progressH.style.width = '0px';\r\n                              return;\r\n                            }\r\n                            var railRect = railH.getBoundingClientRect();\r\n                            var firstRect = nodes[0].querySelector('.dot').getBoundingClientRect();\r\n                            var actRect = nodes[i].querySelector('.dot').getBoundingClientRect();\r\n                            var firstCx = firstRect.left + firstRect.width \/ 2;\r\n                            var actCx = actRect.left + actRect.width \/ 2;\r\n                            var leftPx = Math.max(0, Math.round(firstCx - railRect.left));\r\n                            var widthPx = Math.max(0, Math.round(actCx - firstCx));\r\n                            progressH.style.left = leftPx + 'px';\r\n                            progressH.style.width = widthPx + 'px';\r\n                          }\r\n\r\n                          function currentIndex() {\r\n                            for (var k = 0; k < nodes.length; k++) {\r\n                              if (nodes[k].getAttribute('aria-selected') === 'true') return k;\r\n                            }\r\n                            return -1;\r\n                          }\r\n\r\n                          function setNavDisabled(i) {\r\n                            if (btnPrev) btnPrev.disabled = (i <= 0);\r\n                            if (btnNext) btnNext.disabled = (i >= nodes.length - 1);\r\n                          }\r\n\r\n                          function selectIndex(i, pushHash) {\r\n                            if (i < 0) i = 0;\r\n                            if (i > nodes.length - 1) i = nodes.length - 1;\r\n\r\n                            \/\/ Reset d\u00e9tails inline\r\n                            nodes.forEach(function(n) {\r\n                              var di = n.querySelector('.detail-inline');\r\n                              if (di) {\r\n                                di.style.display = 'none';\r\n                                di.innerHTML = '';\r\n                                di.setAttribute('aria-hidden', 'true');\r\n                              }\r\n                            });\r\n\r\n                            \/\/ \u00c9tats\r\n                            for (var k = 0; k < nodes.length; k++) {\r\n                              var n = nodes[k];\r\n                              n.setAttribute('aria-selected', k === i ? 'true' : 'false');\r\n                              if (k <= i) n.classList.add('is-done');\r\n                              else n.classList.remove('is-done');\r\n                              if (k === i) n.classList.add('is-active');\r\n                              else n.classList.remove('is-active');\r\n                            }\r\n\r\n                            var prefersReduced = window.matchMedia('(prefers-reduced-motion: reduce)').matches;\r\n\r\n                            if (window.innerWidth > 820) {\r\n                              \/\/ Desktop : d\u00e9tail global\r\n                              detailGlobal.innerHTML = renderCard(nodes[i]);\r\n                              try {\r\n                                nodes[i].scrollIntoView({\r\n                                  inline: 'center',\r\n                                  block: 'nearest',\r\n                                  behavior: prefersReduced ? 'auto' : 'smooth'\r\n                                });\r\n                              } catch (e) {}\r\n                              updateProgressH(i);\r\n                            } else {\r\n                              \/\/ Mobile : d\u00e9tail inline\r\n                              var di = nodes[i].querySelector('.detail-inline');\r\n                              if (di) {\r\n                                di.innerHTML = renderCard(nodes[i]);\r\n                                di.style.display = 'block';\r\n                                di.setAttribute('aria-hidden', 'false');\r\n                                setTimeout(function() {\r\n                                  try {\r\n                                    di.scrollIntoView({\r\n                                      block: 'start',\r\n                                      behavior: prefersReduced ? 'auto' : 'smooth'\r\n                                    });\r\n                                  } catch (e) {}\r\n                                }, 20);\r\n                              }\r\n                            }\r\n\r\n                            setNavDisabled(i);\r\n                            if (pushHash) {\r\n                              try {\r\n                                history.replaceState(null, '', '#promo-' + nodes[i].getAttribute('data-id'));\r\n                              } catch (e) {}\r\n                            }\r\n                          }\r\n\r\n                          \/\/ Clic \/ clavier\r\n                          if (btnPrev) btnPrev.addEventListener('click', function() {\r\n                            selectIndex(currentIndex() - 1, true);\r\n                          });\r\n                          if (btnNext) btnNext.addEventListener('click', function() {\r\n                            selectIndex(currentIndex() + 1, true);\r\n                          });\r\n                          nodes.forEach(function(n, i) {\r\n                            n.addEventListener('click', function(e) {\r\n                              \/\/ \u00e9viter que le clic dans le d\u00e9tail-inline replie tout\r\n                              if (e.target.closest('.detail-inline')) return;\r\n                              selectIndex(i, true);\r\n                            });\r\n                            n.addEventListener('keydown', function(e) {\r\n                              var key = e.key || e.keyCode;\r\n                              if (key === 'ArrowRight' || key === 39) {\r\n                                e.preventDefault();\r\n                                selectIndex(i + 1, true);\r\n                              }\r\n                              if (key === 'ArrowLeft' || key === 37) {\r\n                                e.preventDefault();\r\n                                selectIndex(i - 1, true);\r\n                              }\r\n                              if (key === 'Enter' || key === ' ' || key === 13 || key === 32) {\r\n                                e.preventDefault();\r\n                                selectIndex(i, true);\r\n                              }\r\n                            });\r\n                          });\r\n\r\n                          \/\/ Swipe (mobile) \u2013 sur la carte frise\r\n                          (function enableSwipe() {\r\n                            var zone = root.querySelector('.timeline-card');\r\n                            var startX = null,\r\n                              startY = null,\r\n                              swiping = false,\r\n                              thresh = 40;\r\n                            zone.addEventListener('touchstart', function(e) {\r\n                              if (!e.touches || !e.touches[0]) return;\r\n                              startX = e.touches[0].clientX;\r\n                              startY = e.touches[0].clientY;\r\n                              swiping = true;\r\n                            }, {\r\n                              passive: true\r\n                            });\r\n                            zone.addEventListener('touchend', function(e) {\r\n                              if (!swiping || !e.changedTouches) return;\r\n                              var dx = e.changedTouches[0].clientX - startX;\r\n                              if (Math.abs(dx) > thresh) {\r\n                                dx < 0 ? selectIndex(currentIndex() + 1, true) : selectIndex(currentIndex() - 1, true);\r\n                              }\r\n                              swiping = false;\r\n                            }, {\r\n                              passive: true\r\n                            });\r\n                          })();\r\n\r\n                          \/\/ Init\r\n                          var hash = (location.hash || '').replace('#promo-', '');\r\n                          var start = -1;\r\n                          if (hash) {\r\n                            for (var j = 0; j < nodes.length; j++) {\r\n                              if (nodes[j].getAttribute('data-id') === hash) {\r\n                                start = j;\r\n                                break;\r\n                              }\r\n                            }\r\n                          }\r\n                          if (start < 0) {\r\n                            start = nodes.length - 1;\r\n                          }\r\n                          selectIndex(start, !!hash);\r\n\r\n                          \/\/ Recalibrage\r\n                          window.addEventListener('resize', function() {\r\n                            updateProgressH(currentIndex());\r\n                          });\r\n                          nodesWrap.addEventListener('scroll', function() {\r\n                            updateProgressH(currentIndex());\r\n                          }, {\r\n                            passive: true\r\n                          });\r\n                        });\r\n                      })();\r\n                    <\/script>\r\n                  <\/div>\r\n                <\/div>\r\n              <\/div>\r\n            <\/div>\r\n          <\/div>\r\n        <\/div>\r\n      <\/div>\r\n    <\/div>\r\n  <\/div>\r\n<\/div>","protected":false},"excerpt":{"rendered":"<p>La vie des promotions \u2039 ROUSSET Roger 2021 GUY Jean-Marie 2022 BERTRAND Beno\u00eet 2023 LEMESRE Marcel 2024 ROLLOT Andr\u00e9 2025 \u203a S\u00e9lectionnez une promotion pour voir le d\u00e9tail.<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"page-templates\/full-width-page.php","meta":{"footnotes":""},"class_list":["post-3008","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/cadetsgendarmerie01.fr\/index.php\/wp-json\/wp\/v2\/pages\/3008","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/cadetsgendarmerie01.fr\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/cadetsgendarmerie01.fr\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/cadetsgendarmerie01.fr\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/cadetsgendarmerie01.fr\/index.php\/wp-json\/wp\/v2\/comments?post=3008"}],"version-history":[{"count":6,"href":"https:\/\/cadetsgendarmerie01.fr\/index.php\/wp-json\/wp\/v2\/pages\/3008\/revisions"}],"predecessor-version":[{"id":6315,"href":"https:\/\/cadetsgendarmerie01.fr\/index.php\/wp-json\/wp\/v2\/pages\/3008\/revisions\/6315"}],"wp:attachment":[{"href":"https:\/\/cadetsgendarmerie01.fr\/index.php\/wp-json\/wp\/v2\/media?parent=3008"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}