templates/home/index.html.twig line 1

Open in your IDE?
  1. {% extends 'base.html.twig' %}
  2. {% block title %}{{ title ?? 'Accueil' }}{% endblock %}
  3. {% block meta_description %}ACOA — Conseil & Formation.{% endblock %}
  4. {% set canEdit = is_granted('ROLE_MANAGER') %}
  5. {% block stylesheets %}
  6. {{ parent() }}
  7. <link rel="stylesheet" href="{{ asset('assets/home.css') }}">
  8. {% endblock %}
  9. {% block javascripts %}
  10. {{ parent() }}
  11. <script defer src="{{ asset('assets/home.js') }}"></script>
  12. {% endblock %}
  13. {% block content %}
  14. {% if not canEdit %}
  15. <style>
  16.   #cms-devbar,
  17.   .cms-edit-fab,
  18.   .cms-edit-btn,
  19.   .cms-actu-edit,
  20.   .cms-kpis-edit,
  21.   .catalogue-edit-btn,
  22.   #catalogue-edit-modal,
  23.   #actu-editor,
  24.   #kpis-editor {
  25.     display: none !important;
  26.   }
  27. </style>
  28. {% endif %}
  29. <style>
  30.    .catalogue-grid{
  31.    display:grid;
  32.    grid-template-columns:1fr 420px;  
  33.    align-items:center;
  34.    gap:56px;
  35.    }
  36.    .catalogue-art{
  37.    position:relative;
  38.    max-width:420px;
  39.    margin-left:auto;         
  40.    overflow:visible;         
  41.    }
  42.   
  44.   .catalogue-art::before{
  45.    content:"";
  46.    position:absolute;
  47.    top:-22px;
  48.    right:-12px;
  49.    width:calc(100% + 12px);
  50.    height:calc(100% + 36px);
  51.    background:#0A2A45;
  52.    border-radius:14px;
  53.    z-index:0;
  54.    box-shadow:0 12px 26px rgba(7,51,73,.22);
  55.    }
  57.    .cat-card{
  58.    position:relative;
  59.    z-index:1;                
  60.    left:-80px;                
  61.    top:50px;                  
  62.    width:calc(100% + 28px); 
  63.    border-radius:14px;
  64.    overflow:hidden;         
  65.    }
  66.    .cat-card img{
  67.    display:block;
  68.    width:100%;
  69.    height:auto;
  70.    border-radius:14px;
  71.    }
  72.    .cat-veil{
  73.    position:absolute;
  74.    inset:0;
  75.    background:rgba(255,255,255,.42);
  76.    backdrop-filter:blur(1px);
  77.    -webkit-backdrop-filter:blur(1px);
  78.    border-radius:14px;
  79.    z-index:2;
  80.    pointer-events:none;
  81.    }
  82.    .cat-overlay{
  83.    position:absolute;
  84.    inset:0;
  85.    border-radius:14px;
  86.    z-index:3;
  87.    pointer-events:none;
  88.    }
  89.    .cat-vrail{ position:absolute; top:16px; left:18px; display:flex; gap:12px; }
  90.    .cat-vtitle{
  91.    writing-mode:vertical-rl; transform:rotate(180deg);
  92.    font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  93.    font-weight:800; letter-spacing:.02em;
  94.    font-size:clamp(24px,2.6vw,44px);
  95.    color:#143F63;
  96.    }
  97.    .cat-vsubtitle{
  98.    writing-mode:vertical-rl; transform:rotate(180deg);
  99.    font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  100.    font-weight:700; letter-spacing:.02em;
  101.    font-size:clamp(12px,1.4vw,22px);
  102.    color:#F14816;
  103.    }
  104.    .cat-year{
  105.    position:absolute;
  106.    left:22px; bottom:78px;
  107.    font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  108.    font-weight:800;
  109.    font-size:clamp(22px,2.4vw,38px);
  110.    color:#143F63;
  111.    }
  112.    .cat-badge{
  113.    position:absolute;
  114.    left:50%; bottom:14px; transform:translateX(-50%);
  115.    width:84%;
  116.    padding:12px 18px;
  117.    border-radius:9999px;
  118.    background:#F14816;
  119.    color:#fff;
  120.    font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  121.    font-weight:800;
  122.    text-transform:uppercase;
  123.    text-align:center;
  124.    line-height:1.25;
  125.    font-size:clamp(10px,1.1vw,13px);
  126.    box-shadow:0 6px 16px rgba(241,72,22,.30);
  127.    }
  128.    @media (max-width:768px){
  129.    .catalogue-grid{
  130.    grid-template-columns:1fr;
  131.    gap:28px;
  132.    text-align:center;
  133.    }
  134.    .catalogue-art{ margin:0 auto; }
  135.    .cat-card{ left:-22px; top:6px; width:calc(100% + 22px); }
  136.    }
  137.    .cat-veil{
  138.    inset: 0 4px 0 0; 
  139.    }
  144.  .catalogue-grid{
  145.    grid-template-columns: minmax(0, 1fr) minmax(0, 420px);
  146.    column-gap: clamp(28px, 5vw, 120px);
  147.    }
  148. @media (max-width: 1100px){
  149.    .catalogue-grid{
  150.       grid-template-columns: 1fr;
  151.       gap: 28px;
  152.    }
  153. }
  161.    section.catalogue .catalogue-copy{
  162.    max-width: 640px;
  163.    }
  164.    section.catalogue .catalogue-copy .sec-kicker{
  165.    font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  166.    color: #F14816;
  167.    font-weight: 800;
  168.    text-transform: uppercase;
  169.    letter-spacing: .08em;
  170.    font-size: clamp(12px, 1.1vw, 16px);
  171.    margin: 0 0 12px 0;
  172.    }
  173.    section.catalogue .catalogue-copy .sec-title{
  174.    font-weight:800;
  175.    line-height:1.25;
  176.    letter-spacing:.02em;
  177.    text-transform:uppercase;
  178.    font-size:clamp(18px,1.05vw,22px);
  179.    max-width:520px;
  180.    }
  181.    section.catalogue .catalogue-copy .sec-text{
  182.    color: #536273;                 
  183.    font-size: clamp(14px, 1.15vw, 18px);
  184.    line-height: 1.65;
  185.    margin: 0 0 20px 0;
  186.    max-width: 620px;
  187.    }
  188.    section.catalogue .catalogue-copy .btn-row{
  189.    display: flex;
  190.    gap: 16px;
  191.    align-items: center;
  192.    }
  193.    section.catalogue .catalogue-copy .btn.btn-primary{
  194.    background: #F14816;
  195.    color: #fff;
  196.    border: 0;
  197.    padding: 12px 22px;
  198.    border-radius: 9999px;
  199.    font-weight: 700;
  200.    font-size: clamp(14px, 1.05vw, 16px);
  201.    box-shadow: 0 6px 16px rgba(241,72,22,.25);
  202.    }
  203.    section.catalogue .catalogue-copy .btn.btn-primary:hover{
  204.    filter: brightness(1.05);
  205.    }
  206.    section.catalogue .catalogue-copy .btn.btn-outline{
  207.    background: #fff;
  208.    color: #F14816;
  209.    border: 1px solid rgba(20,63,99,.10);
  210.    padding: 12px 22px;
  211.    border-radius: 9999px;
  212.    font-weight: 700;
  213.    font-size: clamp(14px, 1.05vw, 16px);
  214.    box-shadow: 0 6px 18px rgba(17,24,39,.08);
  215.    }
  216.    section.catalogue .catalogue-copy .btn.btn-outline:hover{
  217.    background: #fff7f3;
  218.    border-color: rgba(241,72,22,.35);
  219.    }
  220.    @media (max-width: 768px){
  221.    section.catalogue .catalogue-copy{ max-width: 100%; }
  222.    section.catalogue .catalogue-copy .btn-row{ flex-wrap: wrap; }
  223.    }
  224.    section.catalogue .catalogue-copy .sec-title{
  225.    color:#F14816;
  226.    }
  227.    .container{max-width:1180px;margin:0 auto;padding-left:12px;padding-right:12px}
  228.    .hero-title{
  229.    font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  230.    font-weight:700; line-height:1.05; letter-spacing:.002em;
  231.    font-size:clamp(28px,3.6vw,46px);
  232.    color:#fff; margin:10px 0 18px 0;
  233.    }
  234.    .hero-kicker{
  235.    font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  236.    text-transform:uppercase; font-weight:800; letter-spacing:.08em;
  237.    font-size:clamp(11px,1.1vw,13px); color:#fff;
  238.    opacity:.95;
  239.    }
  240.    .hero-ctas .btn{display:inline-flex;align-items:center;justify-content:center;
  241.    padding:12px 22px;border-radius:9999px;font-weight:700}
  242.    .hero-ctas .btn-primary{background:#F14816;color:#fff;box-shadow:0 6px 16px rgba(241,72,22,.25)}
  243.    .hero-ctas .btn-primary:hover{filter:brightness(1.05)}
  244.    .hero-dots{position:absolute;left:50%;bottom:24px;transform:translateX(-50%);z-index:4;display:flex;gap:8px}
  245.    .hero-dots button{width:8px;height:8px;border-radius:9999px;background:rgba(255,255,255,.6)}
  246.    .hero-dots button[aria-selected="true"]{background:#fff}
  247.    .panel{padding:34px 26px}
  248.    /* Supprimer le radius uniquement du background principal */
  249.    .hero,
  250.    .hero-track,
  251.    .hero-slide {
  252.    border-radius: 0 !important;
  253.    }
  254.    .panel--blue{
  255.    background:#0A2A45;
  256.    color:#fff;
  257.    background-image:linear-gradient(180deg,rgba(255,255,255,.02),transparent);
  258.    }
  259.    .sec-title{font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  260.    font-weight:800;letter-spacing:.01em;margin:0 0 22px 0;color:#143F63;font-size:clamp(24px,2.8vw,34px)}
  261.    .panel--blue .sec-title{color:#fff}
  262.    .sec-kicker{font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  263.    color:#F14816;text-transform:uppercase;font-weight:800;letter-spacing:.08em;font-size:12px;margin:0 0 10px 0}
  264.    .center{text-align:center}
  265.    .competences .competences-grid{
  266.    margin-top:18px; display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:18px;
  267.    }
  268.    .comp-card{
  269.    display:flex;flex-direction:column;align-items:center;gap:10px;
  270.    padding:14px;border-radius:12px;background:rgba(255,255,255,.06);min-height:88px;text-align:center
  271.    }
  272.    .comp-card .comp-icon{width:28px;height:28px}
  273.    .comp-card p{font-size:13px;line-height:1.35}
  274.    .prestations .prestations-grid{
  275.    margin-top:10px; display:grid; grid-template-columns:repeat(3,1fr); gap:18px;
  276.    }
  277.    .presta-card{
  278.    position:relative;border-radius:14px;overflow:hidden;min-height:330px;
  279.    background: #0a2a45;
  280.    }
  281.    .presta-card::before{
  282.    content:"";position:absolute;inset:0;background:var(--img) center/cover no-repeat;z-index:0
  283.    }
  284.    .presta-card::after{
  285.    content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,42,69,.0) 20%,rgba(10,42,69,.75) 75%);z-index:1
  286.    }
  287.    .presta-inner{position:relative;z-index:2;color:#fff;display:flex;flex-direction:column;gap:10px;
  288.    padding:20px 18px;height:100%;justify-content:flex-end}
  289.    .presta-inner h3{font-weight:800;font-size:18px;margin:0}
  290.    .presta-inner p{font-size:14px;opacity:.95}
  291.    .presta-cta{align-self:flex-start}
  292.    .actu .actu-wrap{display:grid;grid-template-columns:1.1fr .9fr;align-items:center;gap:20px}
  293.    .actu-side{position:relative;height:360px}
  294.    .side-card{position:absolute;right:0;width:68%;height:92%;border-radius:14px;background:#6C9FB4}
  295.    .side-card.layer-1{transform:translate(0,0)}
  296.    .side-card.layer-2{right:18px;top:18px;background:#2C72A0}
  297.    .side-card.layer-3{right:36px;top:36px;background:#0A2A45}
  298.    .side-label{position:absolute;right:12px;bottom:18px;transform:rotate(-90deg);transform-origin:bottom right;
  299.    color:#fff;font-weight:800;letter-spacing:.08em}
  300.    .logos-row{display:flex;gap:36px;align-items:center;justify-content:center;flex-wrap:wrap}
  301.    .logo{height:38px;width:auto;opacity:.9}
  302.    .kpi-row{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:10px}
  303.    .kpi{background:rgba(255,255,255,.06);border-radius:14px;padding:18px;color:#fff;text-align:center}
  304.    .kpi-value{font-weight:800;font-size:38px;line-height:1}
  305.    .kpi-label{opacity:.95;margin-top:6px}
  306.    @media (max-width: 992px){
  307.    .competences .competences-grid{grid-template-columns:repeat(3,1fr)}
  308.    .prestations .prestations-grid{grid-template-columns:1fr}
  309.    .actu .actu-wrap{grid-template-columns:1fr}
  310.    }
  311.    .competences .panel--blue{
  312.    background-color:#041F60;
  313.    background-image:
  314.    linear-gradient(180deg, rgba(255,255,255,.02), transparent),
  315.    url('{{ asset('assets/img/img-conseiller.png') }}');
  316.    background-size: cover;
  317.    background-position: center;
  318.    background-repeat: no-repeat;
  319.    }
  320.    .competences .panel--blue {
  321.    position: relative;
  322.    background: url('{{ asset('assets/img/img-conseiller.png') }}') center/cover no-repeat;
  323.    border-radius: 18px;
  324.    overflow: hidden; 
  325.    }
  326.    .competences .panel--blue::before {
  327.    content: "";
  328.    position: absolute;
  329.    inset: 0;
  330.    background: rgba(4, 31, 96, 0.75); 
  331.    z-index: 0;
  332.    }
  333.    .competences .panel--blue > * {
  334.    position: relative;
  335.    z-index: 1;
  336.    }
  337.    .competences .sec-title{
  338.    margin: 0 0 18px 0;
  339.    text-align: left !important;
  340.    color: #fff !important;
  341.    text-transform: uppercase;
  342.    font-weight: 800;
  343.    letter-spacing: .02em;
  344.    font-size: clamp(18px, 1.7vw, 22px);
  345.    }
  346.    .competences .competences-grid{
  347.    margin-top: 8px;
  348.    display: grid;
  349.    grid-template-columns: repeat(5, minmax(0,1fr));
  350.    gap: 22px 26px;
  351.    }
  352.    .comp-card{
  353.    display: inline-flex;
  354.    align-items: center;
  355.    gap: 12px;
  356.    padding: 14px 18px;
  357.    border-radius: 16px;
  358.    background: transparent;           
  359.    color: #fff;                      
  360.    box-shadow: none;
  361.    transition: background .18s ease, color .18s ease, box-shadow .18s ease, transform .16s ease;
  362.    }
  363.    .comp-icon{
  364.    width: 28px; height: 28px; object-fit: contain;
  365.    filter: brightness(0) invert(1);   
  366.    transition: filter .18s ease;
  367.    }
  368.    .comp-card p{
  369.    margin: 0;
  370.    font-weight: 700;
  371.    font-size: clamp(13px, 1.05vw, 16px);
  372.    line-height: 1.25;
  373.    text-align: left;
  374.    }
  375.    .panel .btn.btn-secondary{
  376.    background: transparent !important;
  377.    color: #F14816 !important;
  378.    border: 2px solid #F14816 !important;
  379.    border-radius: 9999px;
  380.    padding: 12px 28px;                
  381.    font-weight: 800;
  382.    box-shadow: none !important;
  383.    transition: background .18s ease, color .18s ease, transform .16s ease;
  384.    }
  385.    .panel .btn.btn-secondary:hover{
  386.    background: #F14816 !important;
  387.    color: #fff !important;
  388.    transform: translateY(-1px);
  389.    }
  390.    @media (max-width: 1100px){
  391.    .competences .competences-grid{ grid-template-columns: repeat(3,1fr); }
  392.    }
  393.    @media (max-width: 640px){
  394.    .competences .competences-grid{ grid-template-columns: repeat(2,1fr); }
  395.    }
  396.    .competences .sec-title{
  397.    margin: 0 0 18px 0;
  398.    text-align: left !important;
  399.    color: #fff !important;
  400.    text-transform: uppercase;
  401.    font-weight: 800;
  402.    letter-spacing: .02em;
  403.    font-size: clamp(18px,1.7vw,22px);
  404.    }
  405.    .competences .competences-grid{
  406.    margin-top: 10px;
  407.    display: grid;
  408.    grid-template-columns: repeat(5, minmax(0,1fr));
  409.    gap: 22px 28px;
  410.    align-items: start;
  411.    }
  412.    .competences .comp-card{
  413.    display: inline-flex !important;
  414.    flex-direction: row !important;
  415.    align-items: center !important;
  416.    gap: 12px !important;
  417.    padding: 14px 18px !important;
  418.    border-radius: 16px !important;
  419.    background: transparent !important;      
  420.    box-shadow: none !important;
  421.    color: #fff !important;                  
  422.    transition: background .18s ease, color .18s ease,
  423.    box-shadow .18s ease, transform .16s ease;
  424.    }
  425.    .competences .comp-card .comp-icon{
  426.    width: 28px; height: 28px; object-fit: contain;
  427.    margin: 0; display: inline-block;
  428.    filter: brightness(0) invert(1);        
  429.    transition: filter .18s ease, opacity .18s ease;
  430.    }
  431.    .competences .comp-card p{
  432.    margin: 0;
  433.    font-weight: 800;
  434.    font-size: clamp(14px,1.05vw,16px);
  435.    line-height: 1.25;
  436.    text-align: left;
  437.    }
  438.    .competences .comp-card:hover,
  439.    .competences .comp-card.is-active{         
  440.    background: #fff !important;
  441.    color: #143F63 !important;              
  442.    box-shadow: 0 10px 22px rgba(10,42,69,.18);
  443.    transform: translateY(-1px);
  444.    }
  445.    .competences .comp-card:hover .comp-icon,
  446.    .competences .comp-card.is-active .comp-icon{
  447.    filter: invert(15%) sepia(18%) saturate(1431%)
  448.    hue-rotate(173deg);
  449.    }
  450.    .panel .btn.btn-secondary{
  451.    background: transparent !important;
  452.    color: #F14816 !important;
  453.    border: 2px solid #F14816 !important;
  454.    border-radius: 9999px !important;
  455.    padding: 12px 32px !important;          
  456.    font-weight: 800 !important;
  457.    box-shadow: none !important;
  458.    transition: background .18s ease, color .18s ease, transform .16s ease;
  459.    }
  460.    .panel .btn.btn-secondary:hover{
  461.    background: #F14816 !important;
  462.    color: #fff !important;
  463.    transform: translateY(-1px);
  464.    }
  465.    @media (max-width: 1100px){
  466.    .competences .competences-grid{ grid-template-columns: repeat(3,1fr); }
  467.    }
  468.    @media (max-width: 640px){
  469.    .competences .competences-grid{ grid-template-columns: repeat(2,1fr); }
  470.    }
  471.    .prestations .prestations-grid{
  472.    display:grid;
  473.    grid-template-columns:repeat(3,1fr);
  474.    gap:24px;
  475.    }
  476.    .prestations .presta-card{
  477.    position:relative;
  478.    border-radius:28px;
  479.    overflow:hidden;
  480.    min-height:360px;
  481.    }
  482.    .prestations .presta-card::before{
  483.    content:"";
  484.    position:absolute; inset:0;
  485.    background:var(--img) center/cover no-repeat;
  486.    z-index:0;
  487.    }
  488.    .prestations .presta-card::after{
  489.    content:"";
  490.    position:absolute; inset:0; z-index:1;
  491.    background:
  492.    linear-gradient(-45deg, var(--corner, transparent) 0 50%, transparent 50%) top right / 150px 150px no-repeat,
  493.    linear-gradient(0deg, var(--tint, rgba(10,42,69,.50))) center/cover no-repeat,
  494.    linear-gradient(180deg, rgba(10,42,69,0) 0%, rgba(10,42,69,.65) 100%);
  495.    box-shadow: inset 0 0 0 9999px rgba(0,0,0,.0);
  496.    }
  497.    .prestations .tone-c::after{
  498.    background:
  499.    linear-gradient(0deg, var(--line, transparent), var(--line, transparent)) center 46% / 100% 2px no-repeat,
  500.    linear-gradient(0deg, var(--tint, rgba(10,42,69,.50))) center/cover no-repeat,
  501.    linear-gradient(180deg, rgba(10,42,69,0) 0%, rgba(10,42,69,.65) 100%);
  502.    }
  503.    .prestations .tone-a{ --tint: rgba(34,142,160,.50); }      
  504.    .prestations .tone-b{ --tint: rgba(88,110,176,.52); --corner: rgba(255,255,255,.12); } 
  505.    .prestations .tone-c{ --tint: rgba(38,74,66,.52); --line: rgba(255,255,255,.35); }  
  506.    .prestations .presta-inner{
  507.    position:relative; z-index:2;
  508.    display:flex; flex-direction:column; height:100%;
  509.    padding:22px 22px 20px 22px;
  510.    color:#fff;
  511.    }
  512.    .prestations .presta-inner h3{
  513.    margin:0 0 10px 0;
  514.    font-weight:800; font-size:22px; line-height:1.15;
  515.    }
  516.    .prestations .presta-inner p{
  517.    margin:0 0 14px 0;
  518.    font-size:14px; line-height:1.65; opacity:.95;
  519.    max-width:90%;
  520.    }
  521.    .prestations .presta-cta{
  522.    margin-top:auto;                              
  523.    align-self:center;
  524.    background:#F14816; color:#fff;
  525.    border-radius:9999px;
  526.    padding:10px 24px;
  527.    font-weight:800;
  528.    box-shadow:0 10px 22px rgba(241,72,22,.25);
  529.    transition:transform .15s ease, filter .2s ease;
  530.    }
  531.    .prestations .presta-cta:hover{
  532.    filter:brightness(1.06);
  533.    transform:translateY(-1px);
  534.    }
  535.    @media (max-width: 980px){
  536.    .prestations .prestations-grid{ grid-template-columns:1fr; }
  537.    }
  538.    .actu .actu-wrap{
  539.    display:grid;
  540.    grid-template-columns: minmax(520px,1fr) 520px; 
  541.    align-items:center;
  542.    gap: clamp(16px,3vw,32px);
  543.    position:relative;
  544.    border-radius:28px;
  545.    overflow:hidden;
  546.    background:
  547.    radial-gradient(700px 280px at 160px calc(100% - 70px), rgba(0,0,0,.30), transparent 65%),
  548.    linear-gradient(180deg, #153E55 0%, #0A2A45 100%);
  549.    color:#fff;
  550.    padding: clamp(22px,4.2vw,56px);
  551.    }
  552.    .actu .actu-copy .sec-kicker{
  553.    color:#F14816; text-transform:uppercase; font-weight:800;
  554.    letter-spacing:.08em; margin:0 0 12px 0;
  555.    font-size: clamp(12px,1.05vw,15px);
  556.    }
  557.    .actu .actu-copy .sec-title{
  558.    margin:0 0 16px 0; color:#fff; font-weight:800; line-height:1.04;
  559.    letter-spacing:.002em; font-size: clamp(34px,5vw,72px);
  560.    }
  561.    .actu .actu-copy p{
  562.    margin:0 0 22px 0; max-width:58ch; line-height:1.65;
  563.    font-size: clamp(14px,1.15vw,18px); color:rgba(255,255,255,.94);
  564.    }
  565.    .actu .actu-copy .btn.btn-primary{
  566.    background:#F14816; color:#fff; border:0;
  567.    border-radius:9999px; padding:16px 28px; font-weight:800;
  568.    box-shadow:0 20px 38px rgba(241,72,22,.22);
  569.    transition:filter .2s ease, transform .15s ease;
  570.    }
  571.    .actu .actu-copy .btn.btn-primary:hover{ filter:brightness(1.07); transform:translateY(-1px); }
  572.    .actu .actu-side{
  573.    position:relative;
  574.    width:100%; height: clamp(280px, 40vw, 520px);
  575.    }
  576.    .actu .side-card{
  577.    position:absolute; border-radius:26px;
  578.    box-shadow: 0 14px 28px rgba(0,0,0,.18);
  579.    }
  580.    .actu .side-card.layer-1{
  581.    top: 18px; right: 0; left: 24%;
  582.    height: 64%;
  583.    border-radius: 24px;
  584.    background: #8FB8C7;
  585.    }
  586.    .actu .side-card.layer-2{
  587.    top: 62px; right: 28px; left: 20%;
  588.    height: 72%;
  589.    border-radius: 22px;
  590.    background: #2D7199;
  591.    }
  592.    .actu .side-card.layer-3{
  593.    top: 110px; right: 56px; left: 16%; bottom: 14px;
  594.    border-radius: 28px;
  595.    background: #08283B;
  596.    box-shadow:
  597.    inset 0 1px 0 rgba(255,255,255,.05),
  598.    0 18px 36px rgba(0,0,0,.22);
  599.    }
  600.    .actu .side-label{
  601.    position:absolute; right: -10px; bottom: -6px;
  602.    writing-mode: vertical-rl; transform: rotate(180deg);
  603.    color:#fff; font-weight:800; letter-spacing:.14em;
  604.    font-size: clamp(10px,1vw,13px); opacity:.9;
  605.    }
  606.    @media (max-width: 980px){
  607.    .actu .actu-wrap{ grid-template-columns: 1fr; }
  608.    .actu .actu-side{ order: 2; height: 320px; margin-top: 8px; }
  609.    }
  610.    .actu .actu-hero{
  611.    --brand:#F14816;
  612.    max-width: 1280px;
  613.    margin: 28px auto 56px;
  614.    min-height: 560px;
  615.    border-radius: 44px;
  616.    overflow: hidden;
  617.    position: relative;
  618.    display: grid;
  619.    grid-template-columns: 1fr 480px;
  620.    align-items: stretch;
  621.    background: var(--bg, none) 55% center/cover no-repeat;
  622.    box-shadow: 0 22px 40px rgba(0,0,0,.14), 0 2px 0 rgba(0,0,0,.05) inset;
  623.    color:#fff;
  624.    }
  625.    .actu .actu-hero::after{
  626.    content:""; position:absolute; left:40px; right:40px; bottom:-16px;
  627.    height:24px; border-radius:24px; filter: blur(16px); background: rgba(0,0,0,.2);
  628.    }
  629.    .actu .actu-shade{
  630.    position:absolute; inset:0;
  631.    background: linear-gradient(90deg, rgba(0,0,0,.70) 0%, rgba(0,0,0,.68) 60%, rgba(0,0,0,.38) 70%, rgba(0,0,0,.16) 75%, rgba(0,0,0,0) 78%);
  632.    pointer-events:none;
  633.    }
  634.    .actu .actu__content{
  635.    position: relative; z-index:2;
  636.    padding: 60px 56px 64px 56px;
  637.    display:flex; flex-direction:column; justify-content:center;
  638.    }
  639.    .actu .actu__content .sec-kicker{
  640.    color:#ffffff; text-transform:uppercase; font-weight:900; letter-spacing:.08em;
  641.    font-size: 28px; margin: 0 0 6px; text-shadow: 0 1px 0 rgba(0,0,0,.2);
  642.    margin-bottom: 40px;
  643.    }
  644.    .actu .actu__content .sec-title{
  645.    color:#fff; font-weight:800; font-size: 24px; margin: 0 0 28px;
  646.    text-shadow: 0 1px 0 rgba(0,0,0,.2);
  647.    }
  648.    .actu .actu__content p{
  649.    font-size: 16px; line-height:1.6; max-width:78ch; margin-bottom: 20px;
  650.    color:rgba(255,255,255,.95); text-shadow: 0 1px 0 rgba(0,0,0,.18);
  651.    }
  652.    .actu .actu__content .btn.btn-primary{
  653.    background: #FF5A1C; color: #FFFFFF; border:0; border-radius: 20px; width: 167px; height: 32px; font-weight:900; font-size:14px;
  654.    }
  655.    .actu .actu__pills{ position:relative; z-index:2; }
  656.    .actu .pill{
  657.    position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  658.    color:#fff; font-weight:900; letter-spacing:.18em; text-transform:uppercase; font-size:18px;
  659.    writing-mode: vertical-rl; transform: rotate(180deg);
  660.    text-shadow: 0 1px 0 rgba(0,0,0,.24);
  661.    }
  662.    .actu .pill--2{
  663.    right: 24px; z-index:2;
  664.    background-image: linear-gradient(90deg, rgba(43,134,255,.58), rgba(43,134,255,.58)), var(--pill-2-img);
  665.    width: 300px;
  666.    }
  667.    .actu .pill--3{
  668.    right: 0; z-index:1;
  669.    background-image: linear-gradient(90deg, rgba(122,208,255,.46), rgba(122,208,255,.46)), var(--pill-3-img);
  670.    width: 300px;
  671.    }
  672.    .actu .pill__label{
  673.    position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  674.    color:#fff; font-weight:900; letter-spacing:.18em; text-transform:uppercase; font-size:18px;
  675.    writing-mode: vertical-rl; transform: rotate(180deg);
  676.    text-shadow: 0 1px 0 rgba(0,0,0,.24);
  677.    }
  678.    @media (max-width: 900px){
  679.    .actu .actu-hero{ grid-template-columns:1fr; min-height:720px; }
  680.    .actu .actu__pills{ height: auto; min-height: 260px; }
  681.    .actu .pill{  width:52%; right:6%; }
  682.    .actu .pill--2{ right:-2%; }
  683.    .actu .pill--3{ display:none; }
  684.    .actu .actu-shade{
  685.    background: linear-gradient(0deg, rgba(0,0,0,.72), rgba(0,0,0,.45));
  686.    }
  687.    }
  688.    .actu .actu__pills{
  689.    --wide: 140px;
  690.    --narrow: 190px;
  691.    --gap: 18px;
  692.    --radius: 60px;
  693.    --shadow: 0 18px 36px rgba(0,0,0,.22);
  694.    position: relative;
  695.    width: calc(var(--wide) + var(--gap) + var(--narrow) + 24px);
  696.    height: 100%;
  697.    margin-left: auto;
  698.    overflow: visible;
  699.    }
  700.    .actu .pill{ all: unset; }
  701.    .actu .pill{
  702.    position: absolute; top: 0; bottom: 0;
  703.    border-radius: var(--radius);
  704.    overflow: hidden;
  705.    background-position: center;
  706.    background-size: cover;
  707.    box-shadow: var(--shadow);
  708.    }
  709.    .actu .pill--3{
  710.    right: 0;
  711.    width: var(--wide);
  712.    z-index: 1;
  713.    background-image:
  714.    linear-gradient(0deg, rgba(8,40,59,.72), rgba(8,40,59,.72)),
  715.    var(--pill-3-img);
  716.    }
  717.    .actu .pill--2{
  718.    width: var(--wide);
  719.    z-index: 2;
  720.    background-image:
  721.    linear-gradient(0deg, rgba(31,110,194,.62), rgba(31,110,194,.62)),
  722.    var(--pill-2-img);
  723.    }
  724.    .actu .pill--1{
  725.    right: calc(var(--wide) + var(--gap) + 100px);
  726.    width: var(--narrow);
  727.    z-index: 3;
  728.    background-image:
  729.    linear-gradient(0deg, rgba(54,154,255,.58), rgba(54,154,255,.58)),
  730.    var(--pill-1-img);
  731.    }
  732.    .actu .pill__label{
  733.    position: absolute; inset: 0; padding-top: 50px;
  734.    display: flex; align-items: center; justify-content: flex-start;
  735.    color: #fff; font-weight: 900; letter-spacing: .18em;
  736.    text-transform: uppercase; font-size: 20px;
  737.    writing-mode: vertical-rl; transform: rotate(180deg);
  738.    text-shadow: 0 1px 0 rgba(0,0,0,.25);
  739.    }
  740.    .actu .actu__pills,
  741.    .actu .actu-side{ overflow: visible !important; }
  742.    @media (max-width: 980px){
  743.    .actu .actu__pills{
  744.    --wide: 180px;
  745.    --narrow: 96px;
  746.    --gap: 14px;
  747.    height: 100%;
  748.    }
  749.    }
  750.    .actu .pill--1, .actu .pill--2, .actu .pill--3 {
  751.    width: var(--narrow);
  752.    z-index: 3;
  753.    background-image: linear-gradient(0deg, rgba(54, 154, 255, .58), rgba(54, 154, 255, .58)), var(--pill-1-img);
  754.    }
  755.    .actu .actu__pills{
  756.    --pillW: 130px;
  757.    --gap:   18px;
  758.    --radius: 44px;
  759.    }
  760.    .actu .pill{
  761.    top: 0; bottom: 0;
  762.    width: var(--pillW) !important;
  763.    border-radius: var(--radius);
  764.    }
  765.    .actu .pill--3{
  766.    right: 0;
  767.    z-index: 1;
  768.    background-image:
  769.    linear-gradient(0deg, rgba(8,40,59,.72), rgba(8,40,59,.72)),
  770.    var(--pill-3-img) !important;
  771.    }
  772.    .actu .pill--2{
  773.    z-index: 2;
  774.    background-image: linear-gradient(0deg, rgba(31, 110, 194, .62), rgba(31, 110, 194, .62)), var(--pill-2-img) !important;
  775.    margin-left: 162px;
  776.    }
  777.    .actu .pill--1{
  778.    z-index: 3;
  779.    background-image:
  780.    linear-gradient(0deg, rgba(54,154,255,.58), rgba(54,154,255,.58)),
  781.    var(--pill-1-img) !important;
  782.    }
  783.    @media (max-width: 991.98px){
  784.    .actu .pill--1{
  785.    position: relative;
  786.    right: calc(var(--pillW) * var(--gap));
  787.    }
  788.    }
  789.    @media (min-width: 992px){
  790.    .actu .pill--1{
  791.    }
  792.    }
  793.    .actu .actu__pills, .actu .actu-side{ overflow: visible !important; }
  794.    .actu .pill--2 {
  795.    margin-right: 45px;
  796.    }
  797.    .actu .pill--1 {
  798.    margin-right: -100px;
  799.    }
  800.    :root{
  801.    --chiffres-bg: #0e2b5a;
  802.    --card-radius: 18px;
  803.    --box-radius: 26px;
  804.    }
  805.    .chiffres{
  806.    background: var(--chiffres-bg);
  807.    border-radius: var(--box-radius);
  808.    padding: 22px 28px 28px;
  809.    color: #fff;
  810.    }
  811.    .chiffres__title{
  812.    font-size: 16px;
  813.    font-weight: 700;
  814.    margin: 0 0 14px;
  815.    opacity: .95;
  816.    }
  817.    .chiffres__grid{
  818.    display: grid;
  819.    grid-template-columns: repeat(3, 1fr);
  820.    gap: 22px;
  821.    margin: 0;
  822.    padding: 0;
  823.    list-style: none;
  824.    }
  825.    .chiffres__cell{ display: contents; }
  826.    .kpi-card{
  827.    position: relative;
  828.    height: 210px;
  829.    border-radius: var(--card-radius);
  830.    overflow: hidden;
  831.    margin: 0;
  832.    box-shadow: 0 6px 18px rgba(0,0,0,.25);
  833.    }
  834.    .kpi-card__img{
  835.    width: 100%;
  836.    height: 100%;
  837.    object-fit: cover;
  838.    display: block;
  839.    transform: scale(1.02);
  840.    }
  841.    .kpi-card::after{
  842.    content: "";
  843.    position: absolute; inset: 0;
  844.    background:
  845.    linear-gradient(180deg, rgba(0,0,0,0) 38%, rgba(0,0,0,.55) 72%, rgba(0,0,0,.65) 100%);
  846.    }
  847.    .kpi-card__caption{
  848.    position: absolute;
  849.    left: 14px; right: 14px; bottom: 12px;
  850.    display: grid;
  851.    row-gap: 6px;
  852.    z-index: 1;
  853.    color: #fff;
  854.    text-shadow: 0 1px 2px rgba(0,0,0,.5);
  855.    }
  856.    .kpi-card__value{
  857.    font-weight: 800;
  858.    font-size: 28px;
  859.    line-height: 1;
  860.    }
  861.    .kpi-card__label{
  862.    font-size: 13px;
  863.    opacity: .95;
  864.    }
  865.    .kpi-card:hover .kpi-card__img{ transform: scale(1.06); }
  866.    .kpi-card:hover{ box-shadow: 0 10px 24px rgba(0,0,0,.3); }
  867.    @media (max-width: 980px){
  868.    .chiffres__grid{ grid-template-columns: 1fr; }
  869.    .kpi-card{ height: 200px; }
  870.    }
  871.    .kpi-card{
  872.    aspect-ratio: 16 / 11;
  873.    min-height: 230px;
  874.    max-height: 300px;
  875.    }
  876.    .kpi-card__img{
  877.    width: 100%;
  878.    height: 100%;
  879.    object-fit: cover;
  880.    object-position: top center;
  881.    display: block;
  882.    }
  883.    .chiffres__grid{
  884.    display: grid;
  885.    grid-template-columns: repeat(3, 1fr);
  886.    gap: 24px;
  887.    justify-content: center;
  888.    max-width: 1100px;
  889.    margin: 0 auto;
  890.    padding: 0;
  891.    list-style: none;
  892.    }
  893.    :root{
  894.    --chiffres-bg:#0e2b5a;
  895.    --plate-bg:rgba(255,255,255,.18);
  896.    --box-radius:26px;
  897.    --plate-radius:18px;
  898.    }
  899.    .chiffres{ padding: 0; }
  900.    .chiffres__panel{
  901.    background:var(--chiffres-bg);
  902.    border-radius:var(--box-radius);
  903.    padding:18px 22px;
  904.    color:#fff;
  905.    }
  906.    .chiffres__title{
  907.    font-size:16px; font-weight:700;
  908.    margin:6px 6px 12px; opacity:.95;
  909.    }
  910.    .chiffres__grid{
  911.    display:grid;
  912.    grid-template-columns:repeat(3,1fr);
  913.    gap:24px;
  914.    margin:0;
  915.    padding:6px;
  916.    list-style:none;
  917.    }
  918.    .chiffre{
  919.    border-radius:var(--plate-radius);
  920.    padding:10px;
  921.    margin-left:-30px;
  922.    }
  923.    .chiffre__media{
  924.    position:relative;
  925.    border-radius:14px;
  926.    overflow:hidden;
  927.    min-height:300px;
  928.    height:clamp(300px, 28vw, 380px);
  929.    }
  930.    .chiffre__media>img{
  931.    position:absolute; inset:0; width:100%; height:100%;
  932.    object-fit:cover; object-position:center 20%;
  933.    transform:scale(1.02);
  934.    filter:saturate(80%) contrast(85%) brightness(78%);
  935.    transition: filter 0.3s ease;
  936.    }
  937.    .chiffre:hover .chiffre__media>img{
  938.    filter: none;
  939.    }
  940.    .chiffre__media::after{
  941.    content:""; position:absolute; inset:0;
  942.    background:linear-gradient(180deg, rgba(0,0,0,.08), rgba(0,0,0,.45));
  943.    }
  944.    .chiffre__content{
  945.    position:absolute; inset:0; display:flex; flex-direction:column;
  946.    justify-content:flex-end; gap:10px; padding:18px 18px 20px; color:#fff;
  947.    text-shadow:0 1px 2px rgba(0,0,0,.45);
  948.    }
  949.    .chiffre__value{font-weight:900; font-size:clamp(2.9rem,4.6vw,5.1rem); line-height:.95; margin-bottom:0}
  950.    .chiffre__label{
  951.    font-size: clamp(1.15rem,1.9vw,2.35rem);
  952.    line-height: 1.12;
  953.    font-weight:700;
  954.    opacity:.96;
  955.    overflow-wrap:anywhere;
  956.    text-wrap:balance;
  957.    max-width:12ch;
  958.    }
  959.    @media (max-width:980px){
  960.    .chiffres__grid{ grid-template-columns:1fr; }
  961.    .chiffre__media{ min-height:260px; height:260px; }
  962.    .chiffre__label{ max-width:none; }
  963.    }
  964.    .chiffres .narrow{
  965.    width: min(1100px, 100%);
  966.    margin: 0 auto;
  967.    }
  968.    .chiffres{
  969.    background: transparent !important;
  970.    padding: 0 !important;
  971.    }
  972.    .chiffres > .container{
  973.    max-width: 1180px;
  974.    margin: 0 auto;
  975.    padding-left: 12px;
  976.    padding-right: 12px;
  977.    }
  978.    .chiffres__panel{
  979.    background: #0e2b5a;
  980.    border-radius: 26px;
  981.    padding: 18px 22px;
  982.    color: #fff;
  983.    }
  984.    .trust{ margin: clamp(18px,5vw,44px) 0 0; }
  985.    .trust .container{ padding-left: 75px; }
  986.    .trust__kicker{
  987.    font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  988.    color:#F14816;
  989.    font-weight: bold;
  990.    text-transform:uppercase;
  991.    letter-spacing:.08em;
  992.    font-size:clamp(12px,1.2vw,16px);
  993.    margin:0 0 4px 0;
  994.    }
  995.    .trust__group + .trust__group{
  996.    margin-top:40px;
  997.    }
  998.    .trust__label{
  999.    font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  1000.    color:#111827;
  1001.    font-weight:800;
  1002.    text-align:center;
  1003.    font-size:clamp(22px,2.4vw,34px);
  1004.    margin:0 0 22px 0;
  1005.    }
  1007.   .trust__logos{
  1008.    display:flex;
  1009.    align-items:center;
  1010.    justify-content:center;
  1011.    flex-wrap:wrap;
  1012.    gap:clamp(18px,3vw,48px);
  1013.    }
  1014.   .trust__group:last-child .trust__logos{
  1015.    padding-bottom:56px;
  1016.    }
  1017. .trust .logo{
  1018.    height:84px;
  1019.    width:auto;
  1020.    opacity:.95;
  1021.    filter:none;
  1022.    transform:none;
  1023.    }
  1028.    .prefooter-gap{
  1029.    height: 56px;
  1030.    background: #fff;
  1031.    }
  1032.    .panel .btn.btn-secondary{
  1033.    background:#F14816 !important;
  1034.    color:#fff !important;
  1035.    border:2px solid #F14816 !important;
  1036.    border-radius:9999px !important;
  1037.    padding:12px 32px !important;
  1038.    font-weight:800 !important;
  1039.    box-shadow:0 10px 22px rgba(241,72,22,.25) !important;
  1040.    transition:filter .18s ease, transform .16s ease;
  1041.    }
  1042.    .panel .btn.btn-secondary:hover{
  1043.    filter:brightness(1.06);
  1044.    transform:translateY(-1px);
  1045.    }
  1046.    .catalogue-text-wrap{ position:relative; }
  1047.    .catalogue-edit-btn{
  1048.    position:absolute; top:-8px; right:-8px;
  1049.    background:#fff; border:1px solid rgba(20,63,99,.12);
  1050.    border-radius:9999px; padding:6px 10px; line-height:1;
  1051.    box-shadow:0 6px 16px rgba(17,24,39,.08); cursor:pointer;
  1052.    }
  1053.    .catalogue-edit-btn:hover{ background:#fff7f3; border-color:rgba(241,72,22,.35); }
  1054.    .catalogue-modal{
  1055.    position:fixed; inset:0; display:grid; place-items:center;
  1056.    background:rgba(0,0,0,.45); z-index:9999;
  1057.    }
  1058.    .catalogue-modal[hidden]{ display:none; }
  1059.    .catalogue-modal__dialog{
  1060.    width:min(720px,92vw); background:#fff; border-radius:16px;
  1061.    padding:18px; box-shadow:0 18px 38px rgba(0,0,0,.28);
  1062.    }
  1063.    #catalogue-edit-textarea{
  1064.    width:100%; border:1px solid #e5e7eb; border-radius:10px; padding:12px; margin:12px 0 16px;
  1065.    font: inherit; line-height:1.5;
  1066.    }
  1067.    .catalogue-modal__actions{ display:flex; gap:12px; justify-content:flex-end; }
  1068.    #hero1,  #hero2{
  1069.    font-size: 40px;
  1070.    }
  1071.    #hero1_h1,  #hero2_h2{
  1072.    font-size: 30px;
  1073.    }
  1074.    /*******************************************************/
  1075.    button.is-loading {
  1076.    position: relative;
  1077.    pointer-events: none;
  1078.    opacity: .9;
  1079.    }
  1080.    button.is-loading::before {
  1081.    content: "";
  1082.    display: inline-block;
  1083.    width: 1em; height: 1em;
  1084.    border: 2px solid currentColor;
  1085.    border-right-color: transparent;
  1086.    border-radius: 50%;
  1087.    vertical-align: -2px;
  1088.    margin-right: .5em;
  1089.    animation: spin .8s linear infinite;
  1090.    }
  1091.    @keyframes spin { to { transform: rotate(360deg) } }
  1092.    .hero-ribbon-shell{
  1093.    position:absolute;
  1094.    top: calc(var(--topbar-h) + var(--nav-offset) + var(--pill-h) + 8px);
  1095.    left:0;
  1096.    right:0;
  1097.    z-index:4;
  1098.    display:flex;
  1099.    justify-content:center;
  1100.    }
  1101.    .hero-ribbon-shell .home-event-ribbon{
  1102.    margin:0;
  1103.    max-width:80%;
  1104.    }
  1105.    .hero {
  1106.    position: relative;
  1107.    overflow: hidden;
  1108.    }
  1109.    .hero-track {
  1110.    display: flex;
  1111.    width: 100%;
  1112.    height: 100%;
  1113.    transition: transform 0.6s ease;
  1114.    will-change: transform;
  1115.    }
  1116.    .hero-track > article.hero-slide,
  1117.    .hero-track > article.hero-slide-config {
  1118.    flex: 0 0 100%;
  1119.    }
  1120.    .hero-track > article {
  1121.    display: none;
  1122.    }
  1123.    .hero-track > article.is-active {
  1124.    display: block;
  1125.    }
  1126.    .swiper-slide {
  1127.    position: relative;          
  1128.    min-height: calc(100vh - 100px); 
  1129.    }
  1130.    .hero-bandeau {
  1131.    position: absolute;
  1132.    top: 110px;              
  1133.    left: 50%;
  1134.    transform: translateX(-50%);
  1135.    z-index: 5;                 
  1136.    }
  1137.    .hero-ribbon-shell {
  1138.    display: flex;
  1139.    justify-content: center;
  1140.    padding: 0 1rem;
  1141.    }
  1142.    .hero-ribbon-shell .home-event-ribbon {
  1143.    display: inline-flex;
  1144.    align-items: center;
  1145.    background: #BA501D;
  1146.    border-radius: 9999px;
  1147.    padding: 6px 20px;
  1148.    width: auto !important;      
  1149.    max-width: 100%;            
  1150.    text-align: center;
  1151.    font-weight: 700;
  1152.    color: #fff;
  1153.    font-size: 0.875rem;
  1154.    }
  1155.    .hero-ribbon-shell .home-event-text {
  1156.    white-space: normal;
  1157.    }
  1158.    .hero-kicker{
  1159.    font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  1160.    text-transform:uppercase;
  1161.    font-weight:800;
  1162.    letter-spacing:.08em;
  1163.    font-size:clamp(13px,1.2vw,18px); 
  1164.    color:#fff;
  1165.    opacity:.95;
  1166.    }
  1167.    .hero-title{
  1168.    font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  1169.    font-weight:800;
  1170.    line-height:1.05;
  1171.    letter-spacing:.01em;
  1172.    font-size:clamp(34px,3.9vw,54px); 
  1173.    color:#fff;
  1174.    margin:10px 0 18px 0;
  1175.    }
  1176.    .chiffres__grid{
  1177.    display: grid;
  1178.    grid-template-columns: repeat(3, 1fr);
  1179.    gap: 22px;
  1180.    margin: 0;
  1181.    padding: 0;
  1182.    list-style: none;
  1183.    justify-content: center;
  1184.    }
  1185.    .chiffres__grid:has(> li:nth-child(4):last-child){
  1186.    grid-template-columns:repeat(2, minmax(0,1fr));
  1187.    }
  1188.    .chiffres__grid:has(> li:nth-child(5):last-child) > li:nth-child(4){
  1189.    grid-column:1;
  1190.    }
  1191.    .chiffres__grid:has(> li:nth-child(5):last-child) > li:nth-child(5){
  1192.    grid-column:3;
  1193.    }
  1194.    @media (max-width:980px){
  1195.    .chiffres__grid{
  1196.    grid-template-columns:1fr;
  1197.    }
  1198.    }
  1199.    .chiffres__grid{
  1200.    display: grid;
  1201.    grid-template-columns: repeat(3, 1fr);
  1202.    gap: 22px;
  1203.    margin: 0;
  1204.    padding: 0;
  1205.    list-style: none;
  1206.    justify-content: center;
  1207.    }
  1208.    .chiffres__grid:has(> li:nth-child(4):last-child){
  1209.    grid-template-columns: repeat(2, 1fr);
  1210.    }
  1211.    .chiffres__grid:has(> li:nth-child(5):last-child) > li:nth-child(4){
  1212.    grid-column: 1;
  1213.    }
  1214.    .chiffres__grid:has(> li:nth-child(5):last-child) > li:nth-child(5){
  1215.    grid-column: 3;
  1216.    }
  1217.    @media (max-width:980px){
  1218.    .chiffres__grid{ grid-template-columns:1fr; }
  1219.    .chiffre__media{ height:240px; }
  1220.    }
  1221.    /*******************************************************/
  1222.    @media (max-width: 767.98px){
  1223.    body.is-home .hero-ribbon-shell{ display:none !important; }
  1224.    body.is-home .hero-nav{ display:none !important; }
  1225.    body.is-home .hero-track > article.is-active{
  1226.    display:flex !important;
  1227.    flex-direction:column;
  1228.    min-height: calc(100vh - 78px);
  1229.    min-height: calc(100svh - 78px);
  1230.    }
  1231.    body.is-home .hero .container.hero-content{
  1232.    flex: 1;
  1233.    max-width: 100% !important;
  1234.    margin: 0 !important;
  1235.    padding: 0 18px 72px !important; 
  1236.    align-items: center !important;
  1237.    justify-content: center !important;
  1238.    text-align: center !important;
  1239.    }
  1240.    body.is-home .hero .hero-copy{
  1241.    width: 100% !important;
  1242.    align-items: center !important;
  1243.    text-align: center !important;
  1244.    }
  1245.    body.is-home .hero-slide .hero-kicker,
  1246.    body.is-home .hero-slide .hero-title{
  1247.    text-align: center !important;
  1248.    }
  1249.    body.is-home .hero-sub{
  1250.    margin-left:auto;
  1251.    margin-right:auto;
  1252.    max-width: 340px;
  1253.    }
  1254.    body.is-home .hero-slide .hero-ctas{
  1255.    width: 100% !important;
  1256.    justify-content: center !important;
  1257.    text-align: center !important;
  1258.    }
  1259.    body.is-home .hero-ctas .btn,
  1260.    body.is-home .hero-ctas .btn-primary{
  1261.    border-radius: 9999px !important;
  1262.    padding: 12px 26px !important;
  1263.    }
  1264.    }
  1271.    .trust .container{ padding-left: 12px; padding-right: 12px; }
  1272. @media (min-width: 992px){
  1273.   .trust .container{ padding-left: 75px; padding-right: 12px; }
  1274. }
  1275. @media (max-width: 991.98px){
  1276.   .trust__kicker,
  1277.   .trust__label{ text-align:center; }
  1278. }
  1279. .only-mobile .chiffres__viewport{
  1280.   width: 100%;
  1281.   max-width: 620px;
  1282.   margin-inline:auto;
  1283.   overflow:hidden;
  1284.   position:relative;
  1285. }
  1288. .chiffres__grid > li{ margin:0; }
  1289. .chiffres__grid .chiffre{ margin:0; }
  1290. .chiffres__grid{ padding:0; }
  1292. .chiffres__grid:has(> li:nth-child(5):last-child){
  1293.   grid-template-columns:repeat(6, minmax(0,1fr));
  1294. }
  1295. .chiffres__grid:has(> li:nth-child(5):last-child) > li{
  1296.   grid-column:span 2;
  1297. }
  1298. .chiffres__grid:has(> li:nth-child(5):last-child) > li:nth-child(4){
  1299.   grid-column:2 / span 2;
  1300. }
  1301. .chiffres__grid:has(> li:nth-child(5):last-child) > li:nth-child(5){
  1302.   grid-column:4 / span 2;
  1303. }
  1305. .trust,
  1306. .chiffres{
  1307.   overflow-x:hidden;
  1308. }
  1310. .trust .container{
  1311.   padding-left:18px;
  1312.   padding-right:18px;
  1313. }
  1315. .chiffre{
  1316.   margin-left:0 !important;
  1317. }
  1319. .only-mobile .chiffres__viewport{
  1320.   width:100% !important;
  1321.   max-width:620px !important;
  1322. }
  1326. @media (max-width: 767.98px){
  1327.   body.is-home .hero-dots{ display:none !important; }
  1328. }
  1331. </style>
  1332. {# --------------------------- HERO / CAROUSEL  --------------------------- #}
  1333. <section class="hero">
  1334.    <div class="hero-track" aria-live="polite">
  1335.       {% set slide1Bg = hero.slide1.bg|default('default') %}
  1336.       {% set slide1IsDefault = (slide1Bg == 'default') %}
  1337.       {% set slide1Ribbon = hero.slide1.ribbon|default('JEUDI 5 ET VENDREDI 6 DÉCEMBRE 2024 · HÔTEL ARAWAK · GOSIER, GUADELOUPE') %}
  1338.       <article
  1339.       data-scope="hero-slide1"
  1340.       data-ribbon-text="{{ slide1Ribbon|e('html_attr') }}"
  1341.       class="{{ slide1IsDefault ? 'hero-slide-config' : 'hero-slide' }}"
  1342.       {% if not slide1IsDefault %}
  1343.       style="--img:url('{{ asset(slide1Bg) }}'); --bg:url('{{ asset(slide1Bg) }}')"
  1344.       {% endif %}
  1345.       >
  1346.       <button
  1347.          style="opacity:0"
  1348.          class="cms-edit-fab"
  1349.          type="button"
  1350.          aria-label="Éditer le slide 1"
  1351.          data-edit-scope="hero-slide1"
  1352.          data-kicker-key="hero_slide1_kicker"
  1353.          data-title-key="hero_slide1_title"
  1354.          data-cta-key="hero_slide1_cta"
  1355.          data-img-key="hero_slide1_bg"
  1356.          data-ribbon-key="hero_slide1_ribbon"
  1357.          data-link-key="hero_slide1_link" 
  1358.          >✏️</button>
  1359.       {% if not slide1IsDefault %}
  1360.       <div class="hero-overlay"></div>
  1361.       <div class="hero-ribbon-shell">
  1362.          <div class="home-event-ribbon">
  1363.             <span class="home-event-text">{{ slide1Ribbon }}</span>
  1364.          </div>
  1365.       </div>
  1366.       <div class="container hero-content">
  1367.          <div class="hero-copy">
  1368.             <h1 class="hero-title">{{ hero.slide1.title|raw }}</h1>
  1369.             {% if hero.slide1.kicker %}
  1370.             <div class="hero-sub">{{ hero.slide1.kicker|raw }}</div>
  1371.             {% endif %}
  1372.             <div class="hero-ctas">
  1373.                <a href="{{ hero.slide1.link|default('#') }}" class="btn btn-primary">{{ hero.slide1.cta }}</a>
  1374.             </div>
  1375.          </div>
  1376.       </div>
  1377.       {% endif %}
  1378.       </article>
  1379.       {# --- SLIDE 2 --- #}
  1380.       {% set slide2Bg = hero.slide2.bg|default('default') %}
  1381.       {% set slide2IsDefault = (slide2Bg == 'default') %}
  1382.       {% set slide2Ribbon = hero.slide2.ribbon|default('JEUDI 5 ET VENDREDI 6 DÉCEMBRE 2024 · HÔTEL ARAWAK · GOSIER, GUADELOUPE') %}
  1383.       <article
  1384.       data-scope="hero-slide2"
  1385.       data-ribbon-text="{{ slide2Ribbon|e('html_attr') }}"
  1386.       class="hero-slide {{ slide2IsDefault ? 'hero-slide-config' : '' }}"
  1387.       {% if not slide2IsDefault %}
  1388.       style="--img:url('{{ asset(slide2Bg) }}'); --bg:url('{{ asset(slide2Bg) }}')"
  1389.       {% endif %}
  1390.       >
  1391.       <button
  1392.          style="opacity:0"
  1393.          class="cms-edit-fab"
  1394.          type="button"
  1395.          aria-label="Éditer le slide 2"
  1396.          data-edit-scope="hero-slide2"
  1397.          data-kicker-key="hero_slide2_kicker"
  1398.          data-title-key="hero_slide2_title"
  1399.          data-cta-key="hero_slide2_cta"
  1400.          data-img-key="hero_slide2_bg"
  1401.          data-ribbon-key="hero_slide2_ribbon"
  1402.          data-link-key="hero_slide2_link"
  1403.          >✏️</button>
  1404.       {% if not slide2IsDefault %}
  1405.       <div class="hero-overlay"></div>
  1406.       <div class="hero-ribbon-shell">
  1407.          <div class="home-event-ribbon">
  1408.             <span class="home-event-text">{{ slide2Ribbon }}</span>
  1409.          </div>
  1410.       </div>
  1411.       <div class="container hero-content">
  1412.          <div class="hero-copy">
  1413.             <h1 class="hero-title" id="hero2_h1">{{ hero.slide2.title|raw }}</h1>
  1414.             {% if hero.slide2.kicker %}
  1415.             <div class="hero-sub" id="hero2_kicker">{{ hero.slide2.kicker|raw }}</div>
  1416.             {% endif %}
  1417.             <div class="hero-ctas">
  1418.                <a href="{{ hero.slide2.link|default('#') }}" class="btn btn-primary">{{ hero.slide2.cta }}</a>
  1419.             </div>
  1420.          </div>
  1421.       </div>
  1422.       {% endif %}
  1423.       </article>
  1424.       {# --- SLIDE 3 --- #}
  1425.       {% set slide3Bg = hero.slide3.bg|default('default') %}
  1426.       {% set slide3IsDefault = (slide3Bg == 'default') %}
  1427.       {% set slide3Ribbon = hero.slide3.ribbon|default('JEUDI 5 ET VENDREDI 6 DÉCEMBRE 2024 · HÔTEL ARAWAK · GOSIER, GUADELOUPE') %}
  1428.       <article
  1429.       data-scope="hero-slide3"
  1430.       data-ribbon-text="{{ slide3Ribbon|e('html_attr') }}"
  1431.       class="{{ slide3IsDefault ? 'hero-slide-config' : 'hero-slide' }}"
  1432.       {% if not slide3IsDefault %}
  1433.       style="--img:url('{{ asset(slide3Bg) }}'); --bg:url('{{ asset(slide3Bg) }}')"
  1434.       {% endif %}
  1435.       >
  1436.       <button
  1437.          style="opacity:0"
  1438.          class="cms-edit-fab"
  1439.          type="button"
  1440.          aria-label="Éditer le slide 3"
  1441.          data-edit-scope="hero-slide3"
  1442.          data-kicker-key="hero_slide3_kicker"
  1443.          data-title-key="hero_slide3_title"
  1444.          data-cta-key="hero_slide3_cta"
  1445.          data-img-key="hero_slide3_bg"
  1446.          data-ribbon-key="hero_slide3_ribbon"
  1447.          data-link-key="hero_slide3_link"
  1448.          >✏️</button>
  1449.       {% if not slide3IsDefault %}
  1450.       <div class="hero-overlay"></div>
  1451.       <div class="hero-ribbon-shell">
  1452.          <div class="home-event-ribbon">
  1453.             <span class="home-event-text">{{ slide3Ribbon }}</span>
  1454.          </div>
  1455.       </div>
  1456.       <div class="container hero-content">
  1457.          <div class="hero-copy">
  1458.             <h1 class="hero-title" id="hero3_h1">{{ hero.slide3.title|raw }}</h1>
  1459.             {% if hero.slide3.kicker %}
  1460.             <div class="hero-sub" id="hero3_kicker">{{ hero.slide3.kicker|raw }}</div>
  1461.             {% endif %}
  1462.             <div class="hero-ctas">
  1463.                <a href="{{ hero.slide3.link|default('#') }}" class="btn btn-primary">{{ hero.slide3.cta }}</a>
  1464.             </div>
  1465.          </div>
  1466.       </div>
  1467.       {% endif %}
  1468.       </article>
  1469.       {# --- SLIDE 4 --- #}
  1470.       {% set slide4Bg = hero.slide4.bg|default('default') %}
  1471.       {% set slide4IsDefault = (slide4Bg == 'default') %}
  1472.       {% set slide4Ribbon = hero.slide4.ribbon|default('JEUDI 5 ET VENDREDI 6 DÉCEMBRE 2024 · HÔTEL ARAWAK · GOSIER, GUADELOUPE') %}
  1473.       <article
  1474.       data-scope="hero-slide4"
  1475.       data-ribbon-text="{{ slide4Ribbon|e('html_attr') }}"
  1476.       class="hero-slide {{ slide4IsDefault ? 'hero-slide-config' : '' }}"
  1477.       {% if not slide4IsDefault %}
  1478.       style="--img:url('{{ asset(slide4Bg) }}'); --bg:url('{{ asset(slide4Bg) }}')"
  1479.       {% endif %}
  1480.       >
  1481.       <button
  1482.          style="opacity:0"
  1483.          class="cms-edit-fab"
  1484.          type="button"
  1485.          aria-label="Éditer le slide 4"
  1486.          data-edit-scope="hero-slide4"
  1487.          data-kicker-key="hero_slide4_kicker"
  1488.          data-title-key="hero_slide4_title"
  1489.          data-cta-key="hero_slide4_cta"
  1490.          data-img-key="hero_slide4_bg"
  1491.          data-ribbon-key="hero_slide4_ribbon"
  1492.          data-link-key="hero_slide4_link"
  1493.          >✏️</button>
  1494.       {% if not slide4IsDefault %}
  1495.       <div class="hero-overlay"></div>
  1496.       <div class="hero-ribbon-shell">
  1497.          <div class="home-event-ribbon">
  1498.             <span class="home-event-text">{{ slide4Ribbon }}</span>
  1499.          </div>
  1500.       </div>
  1501.       <div class="container hero-content">
  1502.          <div class="hero-copy">
  1503.             <h1 class="hero-title" id="hero4_h1">{{ hero.slide4.title|raw }}</h1>
  1504.             {% if hero.slide4.kicker %}
  1505.             <div class="hero-sub" id="hero4_kicker">{{ hero.slide4.kicker|raw }}</div>
  1506.             {% endif %}
  1507.             <div class="hero-ctas">
  1508.                <a href="{{ hero.slide4.link|default('#') }}" class="btn btn-primary">{{ hero.slide4.cta }}</a>
  1509.             </div>
  1510.          </div>
  1511.       </div>
  1512.       {% endif %}
  1513.       </article>
  1514.       {# --- SLIDE 5 --- #}
  1515.       {% set slide5Bg = hero.slide5.bg|default('default') %}
  1516.       {% set slide5IsDefault = (slide5Bg == 'default') %}
  1517.       {% set slide5Ribbon = hero.slide5.ribbon|default('JEUDI 5 ET VENDREDI 6 DÉCEMBRE 2024 · HÔTEL ARAWAK · GOSIER, GUADELOUPE') %}
  1518.       <article
  1519.       data-scope="hero-slide5"
  1520.       data-ribbon-text="{{ slide5Ribbon|e('html_attr') }}"
  1521.       class="hero-slide {{ slide5IsDefault ? 'hero-slide-config' : '' }}"
  1522.       {% if not slide5IsDefault %}
  1523.       style="--img:url('{{ asset(slide5Bg) }}'); --bg:url('{{ asset(slide5Bg) }}')"
  1524.       {% endif %}
  1525.       >
  1526.       <button
  1527.          style="opacity:0"
  1528.          class="cms-edit-fab"
  1529.          type="button"
  1530.          aria-label="Éditer le slide 5"
  1531.          data-edit-scope="hero-slide5"
  1532.          data-kicker-key="hero_slide5_kicker"
  1533.          data-title-key="hero_slide5_title"
  1534.          data-cta-key="hero_slide5_cta"
  1535.          data-img-key="hero_slide5_bg"
  1536.          data-ribbon-key="hero_slide5_ribbon"
  1537.          data-link-key="hero_slide5_link"
  1538.          >✏️</button>
  1539.       {% if not slide5IsDefault %}
  1540.       <div class="hero-overlay"></div>
  1541.       <div class="hero-ribbon-shell">
  1542.          <div class="home-event-ribbon">
  1543.             <span class="home-event-text">{{ slide5Ribbon }}</span>
  1544.          </div>
  1545.       </div>
  1546.       <div class="container hero-content">
  1547.          <div class="hero-copy">
  1548.             <h1 class="hero-title" id="hero5_h1">{{ hero.slide5.title|raw }}</h1>
  1549.             {% if hero.slide5.kicker %}
  1550.             <div class="hero-sub" id="hero5_kicker">{{ hero.slide5.kicker|raw }}</div>
  1551.             {% endif %}
  1552.             <div class="hero-ctas">
  1553.                <a href="{{ hero.slide5.link|default('#') }}" class="btn btn-primary">{{ hero.slide5.cta }}</a>
  1554.             </div>
  1555.          </div>
  1556.       </div>
  1557.       {% endif %}
  1558.       </article>
  1559.       {# --- SLIDE 6 --- #}
  1560.       {% set slide6Bg = hero.slide6.bg|default('default') %}
  1561.       {% set slide6IsDefault = (slide6Bg == 'default') %}
  1562.       {% set slide6Ribbon = hero.slide6.ribbon|default('JEUDI 5 ET VENDREDI 6 DÉCEMBRE 2024 · HÔTEL ARAWAK · GOSIER, GUADELOUPE') %}
  1563.       <article
  1564.       data-scope="hero-slide6"
  1565.       data-ribbon-text="{{ slide6Ribbon|e('html_attr') }}"
  1566.       class="hero-slide {{ slide6IsDefault ? 'hero-slide-config' : '' }}"
  1567.       {% if not slide6IsDefault %}
  1568.       style="--img:url('{{ asset(slide6Bg) }}'); --bg:url('{{ asset(slide6Bg) }}')"
  1569.       {% endif %}
  1570.       >
  1571.       <button
  1572.          style="opacity:0"
  1573.          class="cms-edit-fab"
  1574.          type="button"
  1575.          aria-label="Éditer le slide 6"
  1576.          data-edit-scope="hero-slide6"
  1577.          data-kicker-key="hero_slide6_kicker"
  1578.          data-title-key="hero_slide6_title"
  1579.          data-cta-key="hero_slide6_cta"
  1580.          data-img-key="hero_slide6_bg"
  1581.          data-ribbon-key="hero_slide6_ribbon"
  1582.          data-link-key="hero_slide6_link"
  1583.          >✏️</button>
  1584.       {% if not slide6IsDefault %}
  1585.       <div class="hero-overlay"></div>
  1586.       <div class="hero-ribbon-shell">
  1587.          <div class="home-event-ribbon">
  1588.             <span class="home-event-text">{{ slide6Ribbon }}</span>
  1589.          </div>
  1590.       </div>
  1591.       <div class="container hero-content">
  1592.          <div class="hero-copy">
  1593.             <h1 class="hero-title" id="hero6_h1">{{ hero.slide6.title|raw }}</h1>
  1594.             {% if hero.slide6.kicker %}
  1595.             <div class="hero-sub" id="hero6_kicker">{{ hero.slide6.kicker|raw }}</div>
  1596.             {% endif %}
  1597.             <div class="hero-ctas">
  1598.                <a href="{{ hero.slide6.link|default('#') }}" class="btn btn-primary">{{ hero.slide6.cta }}</a>
  1599.             </div>
  1600.          </div>
  1601.       </div>
  1602.       {% endif %}
  1603.       </article>
  1604.       {# --- SLIDE 7 --- #}
  1605.       {% set slide7Bg = hero.slide7.bg|default('default') %}
  1606.       {% set slide7IsDefault = (slide7Bg == 'default') %}
  1607.       {% set slide7Ribbon = hero.slide7.ribbon|default('JEUDI 5 ET VENDREDI 6 DÉCEMBRE 2024 · HÔTEL ARAWAK · GOSIER, GUADELOUPE') %}
  1608.       <article
  1609.       data-scope="hero-slide7"
  1610.       data-ribbon-text="{{ slide7Ribbon|e('html_attr') }}"
  1611.       class="hero-slide {{ slide7IsDefault ? 'hero-slide-config' : '' }}"
  1612.       {% if not slide7IsDefault %}
  1613.       style="--img:url('{{ asset(slide7Bg) }}'); --bg:url('{{ asset(slide7Bg) }}')"
  1614.       {% endif %}
  1615.       >
  1616.       <button
  1617.          style="opacity:0"
  1618.          class="cms-edit-fab"
  1619.          type="button"
  1620.          aria-label="Éditer le slide 7"
  1621.          data-edit-scope="hero-slide7"
  1622.          data-kicker-key="hero_slide7_kicker"
  1623.          data-title-key="hero_slide7_title"
  1624.          data-cta-key="hero_slide7_cta"
  1625.          data-img-key="hero_slide7_bg"
  1626.          data-ribbon-key="hero_slide7_ribbon"
  1627.          data-link-key="hero_slide7_link"
  1628.          >✏️</button>
  1629.       {% if not slide7IsDefault %}
  1630.       <div class="hero-overlay"></div>
  1631.       <div class="hero-ribbon-shell">
  1632.          <div class="home-event-ribbon">
  1633.             <span class="home-event-text">{{ slide7Ribbon }}</span>
  1634.          </div>
  1635.       </div>
  1636.       <div class="container hero-content">
  1637.          <div class="hero-copy">
  1638.             <h1 class="hero-title" id="hero7_h1">{{ hero.slide7.title|raw }}</h1>
  1639.             {% if hero.slide7.kicker %}
  1640.             <div class="hero-sub" id="hero7_kicker">{{ hero.slide7.kicker|raw }}</div>
  1641.             {% endif %}
  1642.             <div class="hero-ctas">
  1643.                <a href="{{ hero.slide7.link|default('#') }}" class="btn btn-primary">{{ hero.slide7.cta }}</a>
  1644.             </div>
  1645.          </div>
  1646.       </div>
  1647.       {% endif %}
  1648.       </article>
  1649.       {# --- SLIDE 8 --- #}
  1650.       {% set slide8Bg = hero.slide8.bg|default('default') %}
  1651.       {% set slide8IsDefault = (slide8Bg == 'default') %}
  1652.       {% set slide8Ribbon = hero.slide8.ribbon|default('JEUDI 5 ET VENDREDI 6 DÉCEMBRE 2024 · HÔTEL ARAWAK · GOSIER, GUADELOUPE') %}
  1653.       <article
  1654.       data-scope="hero-slide8"
  1655.       data-ribbon-text="{{ slide8Ribbon|e('html_attr') }}"
  1656.       class="hero-slide {{ slide8IsDefault ? 'hero-slide-config' : '' }}"
  1657.       {% if not slide8IsDefault %}
  1658.       style="--img:url('{{ asset(slide8Bg) }}'); --bg:url('{{ asset(slide8Bg) }}')"
  1659.       {% endif %}
  1660.       >
  1661.       <button
  1662.          style="opacity:0"
  1663.          class="cms-edit-fab"
  1664.          type="button"
  1665.          aria-label="Éditer le slide 8"
  1666.          data-edit-scope="hero-slide8"
  1667.          data-kicker-key="hero_slide8_kicker"
  1668.          data-title-key="hero_slide8_title"
  1669.          data-cta-key="hero_slide8_cta"
  1670.          data-img-key="hero_slide8_bg"
  1671.          data-ribbon-key="hero_slide8_ribbon"
  1672.          data-link-key="hero_slide8_link"
  1673.          >✏️</button>
  1674.       {% if not slide8IsDefault %}
  1675.       <div class="hero-overlay"></div>
  1676.       <div class="hero-ribbon-shell">
  1677.          <div class="home-event-ribbon">
  1678.             <span class="home-event-text">{{ slide8Ribbon }}</span>
  1679.          </div>
  1680.       </div>
  1681.       <div class="container hero-content">
  1682.          <div class="hero-copy">
  1683.             <h1 class="hero-title" id="hero8_h1">{{ hero.slide8.title|raw }}</h1>
  1684.             {% if hero.slide8.kicker %}
  1685.             <div class="hero-sub" id="hero8_kicker">{{ hero.slide8.kicker|raw }}</div>
  1686.             {% endif %}
  1687.             <div class="hero-ctas">
  1688.                <a href="{{ hero.slide8.link|default('#') }}" class="btn btn-primary">{{ hero.slide8.cta }}</a>
  1689.             </div>
  1690.          </div>
  1691.       </div>
  1692.       {% endif %}
  1693.       </article>
  1694.       {# --- SLIDE 9 --- #}
  1695.       {% set slide9Bg = hero.slide9.bg|default('default') %}
  1696.       {% set slide9IsDefault = (slide9Bg == 'default') %}
  1697.       {% set slide9Ribbon = hero.slide9.ribbon|default('JEUDI 5 ET VENDREDI 6 DÉCEMBRE 2024 · HÔTEL ARAWAK · GOSIER, GUADELOUPE') %}
  1698.       <article
  1699.       data-scope="hero-slide9"
  1700.       data-ribbon-text="{{ slide9Ribbon|e('html_attr') }}"
  1701.       class="hero-slide {{ slide9IsDefault ? 'hero-slide-config' : '' }}"
  1702.       {% if not slide9IsDefault %}
  1703.       style="--img:url('{{ asset(slide9Bg) }}'); --bg:url('{{ asset(slide9Bg) }}')"
  1704.       {% endif %}
  1705.       >
  1706.       <button
  1707.          style="opacity:0"
  1708.          class="cms-edit-fab"
  1709.          type="button"
  1710.          aria-label="Éditer le slide 9"
  1711.          data-edit-scope="hero-slide9"
  1712.          data-kicker-key="hero_slide9_kicker"
  1713.          data-title-key="hero_slide9_title"
  1714.          data-cta-key="hero_slide9_cta"
  1715.          data-img-key="hero_slide9_bg"
  1716.          data-ribbon-key="hero_slide9_ribbon"
  1717.          data-link-key="hero_slide9_link"
  1718.          >✏️</button>
  1719.       {% if not slide9IsDefault %}
  1720.       <div class="hero-overlay"></div>
  1721.       <div class="hero-ribbon-shell">
  1722.          <div class="home-event-ribbon">
  1723.             <span class="home-event-text">{{ slide9Ribbon }}</span>
  1724.          </div>
  1725.       </div>
  1726.       <div class="container hero-content">
  1727.          <div class="hero-copy">
  1728.             <h1 class="hero-title" id="hero9_h1">{{ hero.slide9.title|raw }}</h1>
  1729.             {% if hero.slide9.kicker %}
  1730.             <div class="hero-sub" id="hero9_kicker">{{ hero.slide9.kicker|raw }}</div>
  1731.             {% endif %}
  1732.             <div class="hero-ctas">
  1733.                <a href="{{ hero.slide9.link|default('#') }}" class="btn btn-primary">{{ hero.slide9.cta }}</a>
  1734.             </div>
  1735.          </div>
  1736.       </div>
  1737.       {% endif %}
  1738.       </article>
  1739.       {# --- SLIDE 10 --- #}
  1740.       {% set slide10Bg = hero.slide10.bg|default('default') %}
  1741.       {% set slide10IsDefault = (slide10Bg == 'default') %}
  1742.       {% set slide10Ribbon = hero.slide10.ribbon|default('JEUDI 5 ET VENDREDI 6 DÉCEMBRE 2024 · HÔTEL ARAWAK · GOSIER, GUADELOUPE') %}
  1743.       <article
  1744.       data-scope="hero-slide10"
  1745.       data-ribbon-text="{{ slide10Ribbon|e('html_attr') }}"
  1746.       class="hero-slide {{ slide10IsDefault ? 'hero-slide-config' : '' }}"
  1747.       {% if not slide10IsDefault %}
  1748.       style="--img:url('{{ asset(slide10Bg) }}'); --bg:url('{{ asset(slide10Bg) }}')"
  1749.       {% endif %}
  1750.       >
  1751.       <button
  1752.          style="opacity:0"
  1753.          class="cms-edit-fab"
  1754.          type="button"
  1755.          aria-label="Éditer le slide 10"
  1756.          data-edit-scope="hero-slide10"
  1757.          data-kicker-key="hero_slide10_kicker"
  1758.          data-title-key="hero_slide10_title"
  1759.          data-cta-key="hero_slide10_cta"
  1760.          data-img-key="hero_slide10_bg"
  1761.          data-ribbon-key="hero_slide10_ribbon"
  1762.          data-link-key="hero_slide10_link"
  1763.          >✏️</button>
  1764.       {% if not slide10IsDefault %}
  1765.       <div class="hero-overlay"></div>
  1766.       <div class="hero-ribbon-shell">
  1767.          <div class="home-event-ribbon">
  1768.             <span class="home-event-text">{{ slide10Ribbon }}</span>
  1769.          </div>
  1770.       </div>
  1771.       <div class="container hero-content">
  1772.          <div class="hero-copy">
  1773.             <h1 class="hero-title" id="hero10_h1">{{ hero.slide10.title|raw }}</h1>
  1774.             {% if hero.slide10.kicker %}
  1775.             <div class="hero-sub" id="hero10_kicker">{{ hero.slide10.kicker|raw }}</div>
  1776.             {% endif %}
  1777.             <div class="hero-ctas">
  1778.                <a href="{{ hero.slide10.link|default('#') }}" class="btn btn-primary">{{ hero.slide10.cta }}</a>
  1779.             </div>
  1780.          </div>
  1781.       </div>
  1782.       {% endif %}
  1783.       </article>
  1784.    </div>
  1785.    <button class="hero-nav prev" aria-label="Slide précédente">‹</button>
  1786.    <button class="hero-nav next" aria-label="Slide suivante">›</button>
  1787.    <div class="hero-dots" role="tablist" aria-label="Sélecteur de diapos"></div>
  1788. </section>
  1789. <div id="cms-devbar">
  1790.    <button id="cms-devbar-toggle" type="button"
  1791.       aria-label="Ouvrir le menu d’édition"
  1792.       aria-expanded="false">
  1793.    ☰
  1794.    </button>
  1795.    <div id="cms-devbar-menu" hidden>
  1796.       <button type="button" data-hero="1">Éditer bandeau slide #1</button>
  1797.       <button type="button" data-hero="2">Éditer bandeau slide #2</button>
  1798.       <button type="button" data-hero="3">Éditer bandeau slide #3</button>
  1799.       <button type="button" data-hero="4">Éditer bandeau slide #4</button>
  1800.       <button type="button" data-hero="5">Éditer bandeau slide #5</button>
  1801.       <button type="button" data-hero="6">Éditer bandeau slide #6</button>
  1802.       <button type="button" data-hero="7">Éditer bandeau slide #7</button>
  1803.       <button type="button" data-hero="8">Éditer bandeau slide #8</button>
  1804.       <button type="button" data-hero="9">Éditer bandeau slide #9</button>
  1805.       <button type="button" data-hero="10">Éditer bandeau slide #10</button>
  1806.    </div>
  1807. </div>
  1808. </div>
  1809. <style>
  1810.    #cms-devbar{
  1811.    position:fixed;
  1812.    top:12px;
  1813.    right:12px;
  1814.    z-index:2147483647;
  1815.    font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  1816.    }
  1817.    #cms-devbar-toggle{
  1818.    width:40px;
  1819.    height:40px;
  1820.    border-radius:9999px;
  1821.    border:0;
  1822.    background:#0A2A45;
  1823.    color:#fff;
  1824.    font-size:20px;
  1825.    display:flex;
  1826.    align-items:center;
  1827.    justify-content:center;
  1828.    box-shadow:0 8px 20px rgba(0,0,0,.25);
  1829.    cursor:pointer;
  1830.    }
  1831.    /* 👇 menu is HIDDEN by default */
  1832.    #cms-devbar-menu{
  1833.    position:absolute;
  1834.    top:48px;
  1835.    right:0;
  1836.    background:#0A2A45;
  1837.    color:#fff;
  1838.    border-radius:10px;
  1839.    padding:8px;
  1840.    box-shadow:0 8px 20px rgba(0,0,0,.25);
  1841.    min-width:190px;
  1842.    display:none;                 /* <= here */
  1843.    flex-direction:column;
  1844.    gap:4px;
  1845.    }
  1846.    #cms-devbar.is-open #cms-devbar-menu{
  1847.    display:flex;
  1848.    }
  1849.    #cms-devbar-menu button{
  1850.    background:transparent;
  1851.    border:0;
  1852.    color:#fff;
  1853.    text-align:left;
  1854.    padding:6px 10px;
  1855.    border-radius:6px;
  1856.    font-size:13px;
  1857.    cursor:pointer;
  1858.    white-space:nowrap;
  1859.    }
  1860.    #cms-devbar-menu button:hover{
  1861.    background:rgba(255,255,255,.12);
  1862.    }
  1863.    #cms-devbar.is-open #cms-devbar-toggle{
  1864.    background:#F14816;
  1865.    }
  1866. </style>
  1867. <script>
  1868.    (function(){
  1869.      const bar = document.getElementById('cms-devbar');
  1870.      if (!bar) return;
  1871.      const toggle = document.getElementById('cms-devbar-toggle');
  1872.      const menu = document.getElementById('cms-devbar-menu');
  1873.    
  1874.      function setOpen(open){
  1875.        bar.classList.toggle('is-open', open);
  1876.        if (open) {
  1877.          menu.hidden = false;
  1878.          toggle.setAttribute('aria-expanded','true');
  1879.        } else {
  1880.          menu.hidden = true;
  1881.          toggle.setAttribute('aria-expanded','false');
  1882.        }
  1883.      }
  1884.    
  1885.      toggle.addEventListener('click', function(){
  1886.        const isOpen = bar.classList.contains('is-open');
  1887.        setOpen(!isOpen);
  1888.      });
  1889.    
  1890.      bar.addEventListener('click', function(e){
  1891.        const btn = e.target.closest('button[data-hero]');
  1892.        if (!btn) return;
  1893.        const idx = btn.dataset.hero;
  1894.        const fab = document.querySelector('[data-scope=hero-slide' + idx + '] .cms-edit-fab');
  1895.        if (fab) fab.click();
  1896.        setOpen(false);
  1897.      });
  1898.    
  1899.      document.addEventListener('click', function(e){
  1900.        if (!bar.contains(e.target) && bar.classList.contains('is-open')) {
  1901.          setOpen(false);
  1902.        }
  1903.      });
  1904.    
  1905.      setOpen(false);
  1906.    })();
  1907. </script>
  1908. {# {% endif %} #}
  1909. <style>
  1910.    .hero-slide{ position:relative; background:var(--img) center/cover no-repeat; height: min(72vh, 860px); width: 100%; }
  1911.    /* Force hero content alignment */
  1912.    .hero-slide .container.hero-content{ 
  1913.    position: relative !important; 
  1914.    z-index: 1 !important; 
  1915.    height: 100% !important;
  1916.    display: flex !important; 
  1917.    align-items: center !important; 
  1918.    justify-content: flex-start !important;
  1919.    max-width: 1180px !important;
  1920.    margin: 0 auto !important;
  1921.    padding: 0 12px !important;
  1922.    }
  1923.    .hero-slide .hero-text-content {
  1924.    width: 100% !important;
  1925.    text-align: left !important;
  1926.    display: flex !important;
  1927.    flex-direction: column !important;
  1928.    align-items: flex-start !important;
  1929.    }
  1930.    .hero-slide .hero-kicker {
  1931.    text-align: left !important;
  1932.    margin-bottom: 6px !important;
  1933.    width: 100% !important;
  1934.    }
  1935.    .hero-slide .hero-title {
  1936.    text-align: left !important;
  1937.    margin: 10px 0 18px 0 !important;
  1938.    width: 100% !important;
  1939.    }
  1940.    .hero-slide .hero-ctas {
  1941.    text-align: left !important;
  1942.    margin-top: 18px !important;
  1943.    justify-content: flex-start !important;
  1944.    width: 100% !important;
  1945.    }
  1946.    /* Override any existing styles */
  1947.    .hero .hero-content {
  1948.    display: flex !important;
  1949.    align-items: center !important;
  1950.    justify-content: flex-start !important;
  1951.    }
  1952.    .cms-edit-fab{
  1953.    position:absolute; top:12px; right:12px; z-index:9;
  1954.    width:36px; height:36px; border:0; border-radius:50%;
  1955.    background:rgba(255,255,255,.95); box-shadow:0 2px 8px rgba(0,0,0,.2);
  1956.    cursor:pointer; font-size:16px; line-height:36px; text-align:center;
  1957.    }
  1958.    .cms-modal[hidden]{ display:none !important; }
  1959.    .cms-modal{ position:fixed; inset:0; display:flex; align-items:center; justify-content:center; background:rgba(0,0,0,.45); z-index:9999; }
  1960.    .cms-modal__dialog{ background:#fff; width:min(720px,92vw); max-height:90vh; overflow:auto; border-radius:12px; box-shadow:0 10px 40px rgba(0,0,0,.25); }
  1961.    .cms-modal__header,.cms-modal__footer{ padding:12px 16px; background:#f7f7f8; display:flex; align-items:center; justify-content:space-between; }
  1962.    .cms-modal__body{ padding:16px; display:grid; gap:12px; }
  1963.    .cms-field span{ display:block; font-size:.9rem; color:#555; margin-bottom:4px; }
  1964.    .cms-field input[type="text"], .cms-field textarea{ width:100%; padding:8px 10px; border:1px solid #ddd; border-radius:6px; }
  1965. </style>
  1966. <script>
  1967.    (function () {
  1968.      // --- helper loader bouton ---
  1969.      function setLoading(btn, isLoading, text = 'Enregistrement…') {
  1970.        if (!btn) return;
  1971.        if (isLoading) {
  1972.          if (!btn.dataset._label) btn.dataset._label = btn.textContent;
  1973.          btn.disabled = true;
  1974.          btn.setAttribute('aria-busy', 'true');
  1975.          btn.innerHTML =
  1976.            '<svg width="16" height="16" viewBox="0 0 50 50" aria-hidden="true" focusable="false" style="vertical-align:-2px;margin-right:8px;">' +
  1977.              '<circle cx="25" cy="25" r="20" fill="none" stroke="currentColor" stroke-width="6" stroke-opacity="0.25"></circle>' +
  1978.              '<path d="M25 5 a20 20 0 0 1 0 40" stroke="currentColor" stroke-width="6" fill="none">' +
  1979.                '<animateTransform attributeName="transform" type="rotate" from="0 25 25" to="360 25 25" dur="0.8s" repeatCount="indefinite"></animateTransform>' +
  1980.              '</path>' +
  1981.            '</svg>' + text;
  1982.        } else {
  1983.          btn.disabled = false;
  1984.          btn.removeAttribute('aria-busy');
  1985.          btn.textContent = btn.dataset._label || 'Enregistrer';
  1986.        }
  1987.      }
  1988.    
  1989.      const modal = document.createElement('div');
  1990.      modal.id = 'cms-hero-modal';
  1991.      modal.className = 'cms-modal';
  1992.      modal.hidden = true;
  1993.      modal.innerHTML = `
  1994.        <div class="cms-modal__dialog" role="dialog" aria-modal="true" aria-labelledby="cms-hero-modal-title">
  1995.          <div class="cms-modal__header">
  1996.            <strong id="cms-hero-modal-title">Éditer le slide</strong>
  1997.            <button type="button" class="cms-modal__close" aria-label="Fermer">×</button>
  1998.          </div>
  1999.          <div class="cms-modal__body">
  2000.            <label class="cms-field"><span>Kicker</span><input type="text" id="cms-hero-kicker"></label>
  2001.            <label class="cms-field"><span>Titre (HTML autorisé)</span><textarea id="cms-hero-title" rows="4"></textarea></label>
  2002.    
  2003.    
  2004.    
  2005.            <label class="cms-field">
  2006.              <span>Texte du bouton</span>
  2007.              <input type="text" id="cms-hero-cta">
  2008.            </label>
  2009.    
  2010.            <label class="cms-field">
  2011.              <span>Lien du bouton</span>
  2012.              <input type="text" id="cms-hero-link" placeholder="https://exemple.com ou /route-interne">
  2013.            </label>
  2014.    
  2015.            <label class="cms-field">
  2016.              <span>Texte du bandeau orange</span>
  2017.              <input type="text" id="cms-hero-ribbon">
  2018.            </label>
  2019.    
  2020.    
  2021.    
  2022.    
  2023.            <label class="cms-field"><span>Image de fond (png/jpg/webp)</span><input type="file" id="cms-hero-file" accept="image/png,image/jpeg,image/webp"></label>
  2024.            <p class="cms-hint">Astuce : privilégiez un visuel ≥ 1600px de large.</p>
  2025.          </div>
  2026.          <div class="cms-modal__footer">
  2027.            <button type="button" class="btn btn-secondary" id="cms-hero-cancel">Annuler</button>
  2028.            <button type="button" class="btn btn-primary" id="cms-hero-save">Enregistrer</button>
  2029.          </div>
  2030.        </div>`;
  2031.      document.body.appendChild(modal);
  2032.    
  2033.      const $ = (s, r=document)=>r.querySelector(s);
  2034.      const closeBtn = $('.cms-modal__close', modal);
  2035.      const cancelBtn= $('#cms-hero-cancel', modal);
  2036.      const saveBtn  = $('#cms-hero-save', modal);
  2037.      const inK      = $('#cms-hero-kicker', modal);
  2038.      const inT      = $('#cms-hero-title',  modal);
  2039.      const inC      = $('#cms-hero-cta',    modal);
  2040.      const inF      = $('#cms-hero-file',   modal);
  2041.      const inR      = $('#cms-hero-ribbon', modal);
  2042.      const inL = $('#cms-hero-link',   modal);
  2043.    
  2044.      let ctx = null;
  2045.    
  2046.      function openModal(context){
  2047.        ctx = context;
  2048.        const s = ctx.slideEl;
  2049.    
  2050.       inK.value = (s.querySelector('.hero-sub')?.textContent || '').trim();
  2051.       inT.value = (s.querySelector('.hero-title')?.innerHTML || '').trim();
  2052.        inC.value = (s.querySelector('.btn')?.textContent    || '').trim();
  2053.    
  2054.        const btn = s.querySelector('.btn');
  2055.        inL.value = (btn?.getAttribute('href') || '').trim();
  2056.    
  2057.        const ribbonText =
  2058.          s.querySelector('.home-event-text')?.textContent ||
  2059.          s.dataset.ribbonText ||
  2060.          '';
  2061.        inR.value = ribbonText.trim();
  2062.    
  2063.        inF.value = '';
  2064.        modal.hidden = false;
  2065.      }
  2066.    
  2067.      function closeModal(){
  2068.        modal.hidden = true;
  2069.        ctx = null;
  2070.      }
  2071.    
  2072.      closeBtn.addEventListener('click', closeModal);
  2073.      cancelBtn.addEventListener('click', closeModal);
  2074.    
  2075.      document.addEventListener('click', (e)=>{
  2076.        const fab = e.target.closest('.cms-edit-fab');
  2077.        if (!fab) return;
  2078.        const slide = fab.closest('[data-scope]');
  2079.        openModal({
  2080.          slideEl: slide,
  2081.          kickerKey: fab.dataset.kickerKey,
  2082.          titleKey:  fab.dataset.titleKey,
  2083.          ctaKey:    fab.dataset.ctaKey,
  2084.          imgKey:    fab.dataset.imgKey,
  2085.          ribbonKey: fab.dataset.ribbonKey,
  2086.          linkKey:   fab.dataset.linkKey 
  2087.        });
  2088.      });
  2089.    
  2090.      async function postText(key, text){
  2091.        const r = await fetch('{{ path("cms_text_update") }}', {
  2092.          method:'POST', headers:{'Content-Type':'application/json'},
  2093.          body: JSON.stringify({ key, text })
  2094.        });
  2095.        const d = await r.json();
  2096.        if (!d.ok) throw new Error(d.error || 'Erreur texte');
  2097.        return d;
  2098.      }
  2099.    
  2100.      function desiredHeroName(file, key) {
  2101.        const prefix = key === 'hero_slide1_bg' ? 'hero1_' :
  2102.                       key === 'hero_slide4_bg' ? 'hero4_' :
  2103.                       key === 'hero_slide5_bg' ? 'hero5_' :
  2104.                       key === 'hero_slide6_bg' ? 'hero6_' :
  2105.                       key === 'hero_slide7_bg' ? 'hero7_' :
  2106.                       key === 'hero_slide8_bg' ? 'hero8_' :
  2107.                       key === 'hero_slide9_bg' ? 'hero9_' :
  2108.                       key === 'hero_slide10_bg' ? 'hero10_' :
  2109.                       key === 'hero_slide3_bg' ? 'hero3_' :
  2110.                       key === 'hero_slide2_bg' ? 'hero2_' : '';
  2111.        const ext  = (file.name.split('.').pop() || '').toLowerCase();
  2112.        const base = file.name.replace(/\.[^.]+$/, '')
  2113.                              .toLowerCase()
  2114.                              .replace(/[^a-z0-9]+/g, '-')
  2115.                              .replace(/^-+|-+$/g, '') || 'image';
  2116.        const stamp = new Date().toISOString().replace(/[-:TZ.]/g,'').slice(0,14);
  2117.        return `${prefix}${base}-${stamp}.${ext}`;
  2118.      }
  2119.    
  2120.     async function uploadImage(key, file){
  2121.        const fd = new FormData();
  2122.        fd.append('key', key);
  2123.        fd.append('file', file, desiredHeroName(file, key));
  2125.        const r = await fetch('{{ path("cms_page_media_upload") }}', { method:'POST', body: fd });
  2126.        const d = await r.json();
  2127.        if (!d.ok) throw new Error(d.error || 'Erreur upload');
  2128.        return d.path;
  2129.      }
  2130.    
  2131.      saveBtn.addEventListener('click', async ()=>{
  2132.        if (!ctx) return;
  2133.        setLoading(saveBtn, true);
  2134.        try{
  2135.          const tasks = [];
  2136.          if (ctx.kickerKey) tasks.push(postText(ctx.kickerKey, inK.value.trim()));
  2137.          if (ctx.titleKey)  tasks.push(postText(ctx.titleKey,  inT.value.trim()));
  2138.          if (ctx.ctaKey)    tasks.push(postText(ctx.ctaKey,    inC.value.trim()));
  2139.          if (ctx.ribbonKey) tasks.push(postText(ctx.ribbonKey, inR.value.trim()));
  2140.          if (ctx.linkKey)   tasks.push(postText(ctx.linkKey,   inL.value.trim()));
  2141.          if (tasks.length) await Promise.all(tasks);
  2142.    
  2143.          let newPath = null;
  2144.          if (inF.files && inF.files[0]) {
  2145.            newPath = await uploadImage(ctx.imgKey, inF.files[0]);
  2146.          }
  2147.    
  2148.          const s = ctx.slideEl;
  2149.         if (ctx.kickerKey) {
  2150.           const kickerHtml = inK.value.trim();
  2151.           let sub = s.querySelector('.hero-sub');
  2152.           if (kickerHtml) {
  2153.             if (!sub) {
  2154.               sub = document.createElement('div');
  2155.               sub.className = 'hero-sub';
  2156.               const titleEl = s.querySelector('.hero-title');
  2157.               if (titleEl) titleEl.insertAdjacentElement('afterend', sub);
  2158.               else s.querySelector('.hero-copy')?.appendChild(sub);
  2159.             }
  2160.             sub.innerHTML = kickerHtml;
  2161.           } else if (sub) {
  2162.             sub.remove();
  2163.           }
  2164.         }
  2165.         if (ctx.titleKey)  { const t = s.querySelector('.hero-title'); if (t) t.innerHTML = inT.value.trim(); }
  2166.          if (ctx.ctaKey)    { const c = s.querySelector('.btn');   if (c) c.textContent = inC.value.trim(); }
  2167.    
  2168.           if (ctx.linkKey) {
  2169.          const cta = s.querySelector('.btn');
  2170.          if (cta) cta.setAttribute('href', inL.value.trim() || '#'); 
  2171.        }
  2172.          if (ctx.ribbonKey) {
  2173.            const raw = inR.value.trim();
  2174.            const txt = (raw && raw !== '-') ? raw : '';
  2175.            const shell = s.querySelector('.hero-ribbon-shell');
  2176.            const rEl = s.querySelector('.home-event-text');
  2178.            if (rEl) rEl.textContent = txt;
  2179.            if (shell) shell.style.display = txt ? '' : 'none';
  2180.            s.dataset.ribbonText = txt;
  2181.          }
  2182.    
  2183.          if (newPath) {
  2184.            const BASE = "{{ asset('/') }}";
  2185.            s.style.setProperty('--img', `url('${BASE}${newPath}')`);
  2186.            s.style.setProperty('--bg',  `url('${BASE}${newPath}')`);
  2187.          }
  2188.    
  2189.          closeModal();
  2190.        } catch(err){
  2191.          alert(err.message || 'Erreur inconnue');
  2192.        } finally{
  2193.          setLoading(saveBtn, false);
  2194.        }
  2195.      });
  2196.    
  2197.    })();
  2198. </script>
  2199. {# --------------------------- CATALOGUE CTA --------------------------- #}
  2200. <section class="catalogue">
  2201.    <div class="container">
  2202.       <div class="catalogue-grid">
  2203.          <div class="catalogue-copy">
  2204.             <div class="catalogue-text-wrap">
  2205.                <h2 class="sec-title">DÉCOUVREZ NOTRE NOUVEAU CATALOGUE DE CONSEIL ET DE FORMATION 2026</h2>
  2206.                <p id="catalogue-text-left" class="sec-text">
  2207.                   {{ catalogue_text_left }}
  2208.                </p>
  2209.                <button
  2210.                   type="button"
  2211.                   class="catalogue-edit-btn"
  2212.                   aria-label="Modifier le texte du catalogue"
  2213.                   data-url="{{ path('catalogue_text_update') }}"
  2214.                   data-csrf="{{ csrf_token('catalogue_text_update') }}"
  2215.                   data-current-text="{{ catalogue_text_left|e('html_attr') }}"
  2216.                   >
  2217.                ✏️
  2218.                </button>
  2219.                <div class="btn-row">
  2220.                   <a href="https://catalogue.acoa.fr/" class="btn btn-outline">Voir plus</a>
  2221.                   <a style ="display:none;" href="{{ asset('catalogue-2026.pdf') }}" class="btn btn-primary" download="catalogue-2026.pdf">Telecharger</a>
  2222.                </div>
  2223.             </div>
  2224.          </div>
  2225.          {# Modal (render once anywhere inside this template, e.g. after the section) #}
  2226.          <div id="catalogue-edit-modal" class="catalogue-modal" hidden>
  2227.             <div class="catalogue-modal__dialog" role="dialog" aria-modal="true" aria-labelledby="catalogue-edit-title">
  2228.                <h3 id="catalogue-edit-title">Modifier le texte du catalogue</h3>
  2229.                <textarea id="catalogue-edit-textarea" rows="8"></textarea>
  2230.                <div class="catalogue-modal__actions">
  2231.                   <button type="button" class="btn btn-outline" id="catalogue-cancel">Annuler</button>
  2232.                   <button type="button" class="btn btn-primary" id="catalogue-validate">Valider</button>
  2233.                </div>
  2234.             </div>
  2235.          </div>
  2236.          <div class="catalogue-art">
  2237.             <div class="cat-card">
  2238.                <img src="{{ asset('assets/img/pexels-thirdman-5684445.png') }}" alt="Catalogue 2026"/>
  2239.                <div class="cat-veil"></div>
  2240.             </div>
  2241.          </div>
  2242.       </div>
  2243.    </div>
  2244. </section>
  2245. {# --------------------------- DOMAINES DE COMPÉTENCES --------------------------- #}
  2246. <section class="competences">
  2247.    <div class="container">
  2248.       <div class="panel panel--blue"
  2249.          style="background-image:url('{{ asset('assets/img/img-conseiller.png') }}');
  2250.          background-size:cover;
  2251.          background-position:center;
  2252.          background-repeat:no-repeat;">
  2253.          <h2 class="sec-title">Nos domaines de compétences</h2>
  2254.          <div class="competences-grid">
  2255.             {% set items = [
  2256.             ["Organisation du travail par l'approche Qualité", 'stonks.png', '/approches-de-la-relation'],
  2257.             ['Élaboration et conduite de projet', 'eos-icons_content-lifecycle-management.png', '/elaboration-et-conduite-de-projet'],
  2258.             ['Équipe de cadres et managers', 'ri_team-fill.png', '/equipe-cadres-managers'],
  2259.             ['Santé au travail', 'mage_heart-health-fill.png', '/sante-au-travail'],
  2260.             ['Gestion globale des risques, des crises & développement durable', 'graph.png', '/gestion-des-risques'],
  2261.             ['Management des ressources humaines', 'carbon_id-management.png', '/management'],
  2262.             ["Mobilisation & cohésion d'équipes", 'hugeicons_agreement-01.png', '/mobilisation-et-cohesion-d-equipes'],
  2263.             ['Organisation sociale & médico-sociale', 'ion_share-social-sharp.png', '/organisation-sociale-medico-social'],
  2264.             ['Évolution et transition professionnelle', 'ph_plant-bold.png', '/evolution-transition-pro'],
  2265.             ] %}
  2266.             {% for i in items %}
  2267.             <a class="comp-card" href="{{ i[2] }}">
  2268.                <img src="{{ asset('assets/img/icons/' ~ i[1]) }}" alt="" class="comp-icon">
  2269.                <p>{{ i[0] }}</p>
  2270.             </a>
  2271.             {% endfor %}
  2272.          </div>
  2273.          <div class="center mt-24">
  2274.             <a href="https://catalogue.acoa.fr/" class="btn btn-secondary">Explorer</a>
  2275.          </div>
  2276.       </div>
  2277.    </div>
  2278. </section>
  2279. <style>
  2280.    .competences .competences-grid{
  2281.    margin-top: 10px;
  2282.    display: grid;
  2283.    grid-template-columns: repeat(3, minmax(0,1fr));
  2284.    gap: 22px 28px;
  2285.    align-items: start;
  2286.    }
  2287.    @media (max-width: 1100px){
  2288.    .competences .competences-grid{
  2289.    grid-template-columns: repeat(2, minmax(0,1fr));
  2290.    }
  2291.    }
  2292.    @media (max-width: 640px){
  2293.    .competences .competences-grid{
  2294.    grid-template-columns: 1fr;
  2295.    }
  2296.    }
  2297.    .competences .comp-card p{
  2298.    margin: 0;
  2299.    font-weight: 800;
  2300.    font-size: clamp(13px,0.95vw,16px);
  2301.    line-height: 1.3;
  2302.    text-align: left;
  2303.    overflow-wrap: anywhere;
  2304.    text-wrap: balance;
  2305.    }
  2306.    .competences .comp-card{
  2307.    text-decoration: none;
  2308.    color: inherit;
  2309.    cursor: pointer;
  2310.    }
  2311. </style>
  2312. {# --------------------------- PRESTATIONS (3 cards over images) --------------------------- #}
  2313. <section class="prestations">
  2314.    <style>
  2315.       @media (max-width: 768px){
  2316.         .prestations .presta-carousel{
  2317.           position: relative;
  2318.         }
  2319.         #presta-track{
  2320.           display: flex !important;
  2321.           overflow-x: auto;
  2322.           gap: 10px;
  2323.           padding: 0 4px;
  2324.           scroll-snap-type: x mandatory;
  2325.           -webkit-overflow-scrolling: touch;
  2326.           scrollbar-width: none;
  2327.         }
  2328.         #presta-track::-webkit-scrollbar{
  2329.           display:none;
  2330.         }
  2331.         #presta-track .presta-card{
  2332.           flex: 0 0 calc(100% - 8px);
  2333.           min-width: calc(100% - 8px);
  2334.           scroll-snap-align: center;
  2335.           border-radius: 0;
  2336.           min-height: clamp(520px, 78vh, 680px);
  2337.         }
  2339.         .prestations .prestations--overimg .presta-card{
  2340.           padding: 0 !important;
  2341.           background-position: center !important;
  2342.           background-size: cover !important;
  2343.         }
  2344.         .prestations .prestations--overimg .presta-card::after{
  2345.           background: linear-gradient(180deg, rgba(10,43,88,.18) 0%, rgba(10,43,88,.62) 70%, rgba(10,43,88,.82) 100%) !important;
  2346.         }
  2348.         /* Keep text and CTA visible on mobile cards */
  2349.         .prestations .presta-inner{
  2350.           display: flex !important;
  2351.           flex-direction: column;
  2352.           justify-content: flex-end;
  2353.           height: 100%;
  2354.           padding: 18px 16px;
  2355.         }
  2356.         .prestations .presta-inner h3{
  2357.           font-size: clamp(22px, 6vw, 34px);
  2358.           line-height: 1.1;
  2359.           margin: 0 0 10px 0;
  2360.         }
  2361.         .prestations .presta-inner p{
  2362.           font-size: clamp(13px, 3.8vw, 18px);
  2363.           line-height: 1.5;
  2364.           margin: 0 0 12px 0;
  2365.           max-width: 92%;
  2366.         }
  2367.         .prestations .presta-cta{
  2368.           margin-top: auto;
  2369.           align-self: center;
  2370.         }
  2372.         .prestations .presta-nav{
  2373.           position: absolute;
  2374.           top: 50%;
  2375.           transform: translateY(-50%);
  2376.           width: 42px;
  2377.           height: 42px;
  2378.           border: 0;
  2379.           border-radius: 999px;
  2380.           background: rgba(41, 52, 58, .45);
  2381.           color: #fff;
  2382.           box-shadow: 0 8px 18px rgba(0,0,0,.22);
  2383.           display: grid;
  2384.           place-items: center;
  2385.           z-index: 5;
  2386.         }
  2387.         .prestations .presta-nav.prev{ left: 10px; }
  2388.         .prestations .presta-nav.next{ right: 10px; }
  2389.         .prestations .presta-dots{
  2390.           display: flex;
  2391.           justify-content: center;
  2392.           gap: 7px;
  2393.           margin-top: 10px;
  2394.         }
  2395.         .prestations .presta-dots button{
  2396.           width: 7px;
  2397.           height: 7px;
  2398.           border-radius: 999px;
  2399.           border: 0;
  2400.           background: rgba(255,255,255,.55);
  2401.         }
  2402.         .prestations .presta-dots button[aria-selected="true"]{
  2403.           background: #fff;
  2404.           transform: scale(1.1);
  2405.         }
  2406.       }
  2407.       @media (min-width: 769px){
  2408.         .prestations .presta-nav,
  2409.         .prestations .presta-dots{
  2410.           display: none;
  2411.         }
  2412.       }
  2413.    </style>
  2414.    <div class="container">
  2415.       <h2 class="sec-title sec-title--orange"> NOS PRESTATIONS {# (Optional) make the section title editable too — uncomment to use: <button class="cms-edit-btn" data-url="{{ path('cms_text_update') }}" data-key="prestations_title" data-target="#prestations-title" data-mode="text" aria-label="Modifier le titre de la section">✏️</button> #} </h2>
  2416.       <div class="presta-carousel">
  2417.          <div class="prestations-grid prestations--overimg" id="presta-track">
  2418.             <article class="presta-card tone-a"
  2419.                style="--img:url('{{ asset(prestations[0].img) }}')"
  2420.                data-title-key="presta_card1_title"
  2421.                data-text-key="text_action_formation_card1"
  2422.                data-cta-key="presta_card1_cta"
  2423.                data-img-key="presta_card1_img">
  2424.                <div class="presta-inner">
  2425.                   <h3 id="presta1-title">
  2426.                      {{ (prestations is defined ? prestations[0].title : 'Action de formation inter') }}
  2427.                      <button
  2428.                         class="cms-edit-btn"
  2429.                         data-url="{{ path('cms_text_update') }}"
  2430.                         data-key="presta_card1_title"
  2431.                         data-target="#presta1-title"
  2432.                         data-mode="text"
  2433.                         aria-label="Modifier le titre">✏️</button>
  2434.                   </h3>
  2435.                   <p id="presta1-text">
  2436.                      {{ (prestations is defined ? prestations[0].text : text_action_formation_card1)|raw }}
  2437.                      <button
  2438.                         class="cms-edit-btn"
  2439.                         data-url="{{ path('cms_text_update') }}"
  2440.                         data-key="text_action_formation_card1"
  2441.                         data-target="#presta1-text"
  2442.                         data-mode="html"
  2443.                         aria-label="Modifier le texte">✏️</button>
  2444.                   </p>
  2445.                   <a class="btn btn-primary presta-cta" id="presta1-cta" href="https://acoa.fr/intra">
  2446.                   {{ (prestations is defined ? prestations[0].cta : 'Voir plus') }}
  2447.                   </a>
  2448.                </div>
  2449.             </article>
  2450.             <article class="presta-card tone-b"
  2451.                style="--img:url('{{ asset(prestations[1].img) }}')"
  2452.                data-title-key="presta_card2_title"
  2453.                data-text-key="text_action_formation_card2"
  2454.                data-cta-key="presta_card2_cta"
  2455.                data-img-key="presta_card2_img">
  2456.                <div class="presta-inner">
  2457.                   <h3 id="presta2-title">
  2458.                      {{ (prestations is defined ? prestations[1].title : 'Bilan de compétence') }}
  2459.                      <button
  2460.                         class="cms-edit-btn"
  2461.                         data-url="{{ path('cms_text_update') }}"
  2462.                         data-key="presta_card2_title"
  2463.                         data-target="#presta2-title"
  2464.                         data-mode="text"
  2465.                         aria-label="Modifier le titre">✏️</button>
  2466.                   </h3>
  2467.                   <p id="presta2-text">
  2468.                      {{ (prestations is defined ? prestations[1].text : text_action_formation_card2)|raw }}
  2469.                      <button
  2470.                         class="cms-edit-btn"
  2471.                         data-url="{{ path('cms_text_update') }}"
  2472.                         data-key="text_action_formation_card2"
  2473.                         data-target="#presta2-text"
  2474.                         data-mode="html"
  2475.                         aria-label="Modifier le texte">✏️</button>
  2476.                   </p>
  2477.                   <a class="btn btn-primary presta-cta" id="presta2-cta" href="https://acoa.fr/competency-domains">
  2478.                   {{ (prestations is defined ? prestations[1].cta : 'Voir plus') }}
  2479.                   </a>
  2480.                </div>
  2481.             </article>
  2482.             <article class="presta-card tone-c"
  2483.                style="--img:url('{{ asset(prestations[2].img) }}')"
  2484.                data-title-key="presta_card3_title"
  2485.                data-text-key="text_action_formation_card3"
  2486.                data-cta-key="presta_card3_cta"
  2487.                data-img-key="presta_card3_img">
  2488.                <div class="presta-inner">
  2489.                   <h3 id="presta3-title">
  2490.                      {{ (prestations is defined ? prestations[2].title : 'Prestation conseils') }}
  2491.                      <button
  2492.                         class="cms-edit-btn"
  2493.                         data-url="{{ path('cms_text_update') }}"
  2494.                         data-key="presta_card3_title"
  2495.                         data-target="#presta3-title"
  2496.                         data-mode="text"
  2497.                         aria-label="Modifier le titre">✏️</button>
  2498.                   </h3>
  2499.                   <p id="presta3-text">
  2500.                      {{ (prestations is defined ? prestations[2].text : text_action_formation_card3)|raw }}
  2501.                      <button
  2502.                         class="cms-edit-btn"
  2503.                         data-url="{{ path('cms_text_update') }}"
  2504.                         data-key="text_action_formation_card3"
  2505.                         data-target="#presta3-text"
  2506.                         data-mode="html"
  2507.                         aria-label="Modifier le texte">✏️</button>
  2508.                   </p>
  2509.                </div>
  2510.             </article>
  2511.          </div>
  2512.          <button class="presta-nav prev" aria-label="Slide précédente">‹</button>
  2513.          <button class="presta-nav next" aria-label="Slide suivante">›</button>
  2514.          <div class="presta-dots" role="tablist" aria-label="Sélecteur de prestations"></div>
  2515.       </div>
  2516.    </div>
  2517.   <script>
  2518. (() => {
  2519.   const car = document.querySelector('.prestations .presta-carousel');
  2520.   if (!car) return;
  2522.   const track = car.querySelector('#presta-track');
  2523.   const slides = [...track.querySelectorAll('.presta-card')];
  2524.   const prev = car.querySelector('.presta-nav.prev');
  2525.   const next = car.querySelector('.presta-nav.next');
  2526.   const dots = car.querySelector('.presta-dots');
  2528.   if (!track || !slides.length || !prev || !next || !dots) return;
  2530.   dots.innerHTML = '';
  2531.   slides.forEach((_, i) => {
  2532.     const b = document.createElement('button');
  2533.     b.type = 'button';
  2534.     b.setAttribute('role', 'tab');
  2535.     b.addEventListener('click', () => goTo(i, 'smooth'));
  2536.     dots.appendChild(b);
  2537.   });
  2539.   let index = 0;
  2540.   let raf = 0;
  2542.   function clamp(i) {
  2543.     return Math.max(0, Math.min(slides.length - 1, i));
  2544.   }
  2546.   function setActive(i) {
  2547.     index = clamp(i);
  2548.     [...dots.children].forEach((b, idx) => {
  2549.       b.setAttribute('aria-selected', idx === index ? 'true' : 'false');
  2550.     });
  2551.     car.dataset.index = String(index);
  2552.   }
  2554.   function goTo(i, behavior = 'smooth') {
  2555.     i = clamp(i);
  2556.     const tr = track.getBoundingClientRect();
  2557.     const sr = slides[i].getBoundingClientRect();
  2558.     const trCenter = tr.left + tr.width / 2;
  2559.     const srCenter = sr.left + sr.width / 2;
  2560.     let target = track.scrollLeft + (srCenter - trCenter);
  2561.     const max = track.scrollWidth - track.clientWidth;
  2562.     if (target < 0) target = 0;
  2563.     if (target > max) target = max;
  2564.     track.scrollTo({ left: target, behavior });
  2565.     setActive(i);
  2566.   }
  2568.   function computeActiveFromScroll() {
  2569.     const tr = track.getBoundingClientRect();
  2570.     const center = tr.left + tr.width / 2;
  2571.     let best = 0;
  2572.     let bestDist = Infinity;
  2574.     for (let i = 0; i < slides.length; i++) {
  2575.       const r = slides[i].getBoundingClientRect();
  2576.       const c = r.left + r.width / 2;
  2577.       const d = Math.abs(c - center);
  2578.       if (d < bestDist) {
  2579.         bestDist = d;
  2580.         best = i;
  2581.       }
  2582.     }
  2583.     setActive(best);
  2584.   }
  2586.   function onScroll() {
  2587.     if (raf) return;
  2588.     raf = requestAnimationFrame(() => {
  2589.       raf = 0;
  2590.       computeActiveFromScroll();
  2591.     });
  2592.   }
  2594.   prev.addEventListener('click', () => goTo((+car.dataset.index || 0) - 1, 'smooth'));
  2595.   next.addEventListener('click', () => goTo((+car.dataset.index || 0) + 1, 'smooth'));
  2597.   track.addEventListener('scroll', onScroll, { passive: true });
  2598.   window.addEventListener('resize', () => {
  2599.     computeActiveFromScroll();
  2600.   });
  2602.   setActive(0);
  2603.   goTo(0, 'auto');
  2604. })();
  2605. </script>
  2606.  
  2607.    <div id="cms-modal" class="cms-modal" hidden>
  2608.       <div class="cms-modal__dialog">
  2609.          <div class="cms-modal__header"> <strong id="cms-modal-title">Éditer le contenu</strong> <button type="button" class="cms-modal__close" aria-label="Fermer">×</button> </div>
  2610.          <div class="cms-modal__body">
  2611.             <textarea id="cms-editor" rows="8"></textarea>
  2612.             <p class="cms-hint">Astuce : pour les paragraphes, vous pouvez utiliser des sauts de ligne ou du HTML simple (strong, br, a, etc.).</p>
  2613.          </div>
  2614.          <div class="cms-modal__footer"> <button type="button" class="btn btn-secondary" id="cms-cancel">Annuler</button> <button type="button" class="btn btn-primary" id="cms-save">Enregistrer</button> </div>
  2615.       </div>
  2616.    </div>
  2617. </section>
  2618. <script>
  2619.    (() => {
  2620.      // --- Loader helper for the "Enregistrer" button ---
  2621.      function setLoading(btn, isLoading, text = 'Enregistrement…') {
  2622.        if (!btn) return;
  2623.        if (isLoading) {
  2624.          if (!btn.dataset._label) btn.dataset._label = btn.textContent;
  2625.          btn.disabled = true;
  2626.          btn.setAttribute('aria-busy', 'true');
  2627.          btn.innerHTML =
  2628.            '<svg width="16" height="16" viewBox="0 0 50 50" aria-hidden="true" focusable="false" style="vertical-align:-2px;margin-right:8px;">' +
  2629.              '<circle cx="25" cy="25" r="20" fill="none" stroke="currentColor" stroke-width="6" stroke-opacity="0.25"></circle>' +
  2630.              '<path d="M25 5 a20 20 0 0 1 0 40" stroke="currentColor" stroke-width="6" fill="none">' +
  2631.                '<animateTransform attributeName="transform" type="rotate" from="0 25 25" to="360 25 25" dur="0.8s" repeatCount="indefinite"></animateTransform>' +
  2632.              '</path>' +
  2633.            '</svg>' + text;
  2634.        } else {
  2635.          btn.disabled = false;
  2636.          btn.removeAttribute('aria-busy');
  2637.          btn.textContent = btn.dataset._label || 'Enregistrer';
  2638.        }
  2639.      }
  2640.    
  2641.      const modal = document.getElementById('cms-modal');
  2642.      const editor = document.getElementById('cms-editor');
  2643.      const btnSave = document.getElementById('cms-save');
  2644.      const btnCancel = document.getElementById('cms-cancel');
  2645.      const btnClose = modal.querySelector('.cms-modal__close');
  2646.      const titleEl = document.getElementById('cms-modal-title');
  2647.    
  2648.      let current = { url: '', key: '', targetSel: '', mode: 'text' };
  2649.    
  2650.      function openModal({ url, key, targetSel, mode }) {
  2651.        current = { url, key, targetSel, mode };
  2652.        const target = document.querySelector(targetSel);
  2653.        if (!target) return;
  2654.    
  2655.        const value = mode === 'html' ? target.innerHTML.trim() : target.textContent.trim();
  2656.        editor.value = value;
  2657.        titleEl.textContent = `Éditer: ${key}`;
  2658.        modal.hidden = false;
  2659.        editor.focus();
  2660.      }
  2661.    
  2662.      function closeModal() {
  2663.        modal.hidden = true;
  2664.        editor.value = '';
  2665.        current = { url: '', key: '', targetSel: '', mode: 'text' };
  2666.      }
  2667.    
  2668.      document.addEventListener('click', (ev) => {
  2669.        const btn = ev.target.closest('.cms-edit-btn');
  2670.        if (btn) {
  2671.          ev.preventDefault();
  2672.          openModal({
  2673.            url: btn.dataset.url,
  2674.            key: btn.dataset.key,
  2675.            targetSel: btn.dataset.target,
  2676.            mode: btn.dataset.mode || 'text'
  2677.          });
  2678.        }
  2679.      });
  2680.    
  2681.      btnSave.addEventListener('click', async () => {
  2682.        const { url, key, targetSel, mode } = current;
  2683.        if (!url || !key || !targetSel) return;
  2684.    
  2685.        const text = editor.value.trim();
  2686.    
  2687.        setLoading(btnSave, true);
  2688.        try {
  2689.          const res = await fetch(url, {
  2690.            method: 'POST',
  2691.            headers: { 'Content-Type': 'application/json', 'Accept': 'application/json' },
  2692.            body: JSON.stringify({ key, text })
  2693.          });
  2694.          const data = await res.json();
  2695.    
  2696.          if (!data.ok) throw new Error(data.error || 'Erreur inconnue');
  2697.    
  2698.          const target = document.querySelector(targetSel);
  2699.          if (target) {
  2700.            if (mode === 'html') target.innerHTML = text;
  2701.            else target.textContent = text;
  2702.          }
  2703.    
  2704.          closeModal();
  2705.        } catch (e) {
  2706.          alert('Impossible de sauvegarder: ' + e.message);
  2707.        } finally {
  2708.          setLoading(btnSave, false);
  2709.        }
  2710.      });
  2711.    
  2712.      [btnCancel, btnClose, modal].forEach(el => {
  2713.        el.addEventListener('click', (e) => {
  2714.          if (e.target === modal || e.target === btnCancel || e.target === btnClose) closeModal();
  2715.        });
  2716.      });
  2717.    
  2718.      document.addEventListener('keydown', (e) => {
  2719.        if (!modal.hidden && e.key === 'Escape') closeModal();
  2720.      });
  2721.    })();
  2722.    
  2723.    
  2724. </script>
  2726. <script>
  2727.    (function () {
  2728.      // --- Loader helper for the "Enregistrer" button ---
  2729.      function setLoading(btn, isLoading, text = 'Enregistrement…') {
  2730.        if (!btn) return;
  2731.        if (isLoading) {
  2732.          if (!btn.dataset._label) btn.dataset._label = btn.textContent;
  2733.          btn.disabled = true;
  2734.          btn.setAttribute('aria-busy', 'true');
  2735.          btn.innerHTML =
  2736.            '<svg width="16" height="16" viewBox="0 0 50 50" aria-hidden="true" focusable="false" style="vertical-align:-2px;margin-right:8px;">' +
  2737.              '<circle cx="25" cy="25" r="20" fill="none" stroke="currentColor" stroke-width="6" stroke-opacity="0.25"></circle>' +
  2738.              '<path d="M25 5 a20 20 0 0 1 0 40" stroke="currentColor" stroke-width="6" fill="none">' +
  2739.                '<animateTransform attributeName="transform" type="rotate" from="0 25 25" to="360 25 25" dur="0.8s" repeatCount="indefinite"></animateTransform>' +
  2740.              '</path>' +
  2741.            '</svg>' + text;
  2742.        } else {
  2743.          btn.disabled = false;
  2744.          btn.removeAttribute('aria-busy');
  2745.          btn.textContent = btn.dataset._label || 'Enregistrer';
  2746.        }
  2747.      }
  2748.    
  2749.      const UPDATE_URL = "{{ path('cms_text_update') }}";
  2750.      const $ = (sel, root=document) => root.querySelector(sel);
  2751.    
  2752.      let modal, closeEl, btnSave, btnCancel;
  2753.      let inKicker, inTitle, inP1, inP2, inCta, inPill1;
  2754.    
  2755.      let ctx = null;
  2756.    
  2757.      function openActuEditor(root) {
  2758.        if (!root) return;
  2759.        const els = {
  2760.          kicker: $('#actu-kicker', root),
  2761.          title:  $('#actu-title',  root),
  2762.          p1:     $('#actu-p1',     root),
  2763.          p2:     $('#actu-p2',     root),
  2764.          cta:    $('#actu-cta',    root),
  2765.          pill1:  $('#actu-pill1-label', root)
  2766.        };
  2767.        const keys = {
  2768.          kicker: root.dataset.kickerKey || '',
  2769.          title:  root.dataset.titleKey  || '',
  2770.          p1:     root.dataset.p1Key     || '',
  2771.          p2:     root.dataset.p2Key     || '',
  2772.          cta:    root.dataset.ctaKey    || '',
  2773.          pill1:  root.dataset.pill1Key  || ''
  2774.        };
  2775.    
  2776.        ctx = { root, els, keys };
  2777.    
  2778.        inKicker.value = (els.kicker?.textContent || 'Actualités du moment').trim();
  2779.        inTitle.value  = (els.title?.textContent  || 'Titre de l’actualité').trim();
  2780.        inP1.value     = (els.p1?.innerHTML       || '').trim();
  2781.        inP2.value     = (els.p2?.innerHTML       || '').trim();
  2782.        inCta.value    = (els.cta?.textContent    || 'Découvrir').trim();
  2783.        inPill1.value  = (els.pill1?.textContent  || 'Mieux Gérer').trim();
  2784.    
  2785.        modal.hidden = false;
  2786.        inTitle.focus();
  2787.      }
  2788.    
  2789.      function closeModal() {
  2790.        if (!modal) return;
  2791.        modal.hidden = true;
  2792.        ctx = null;
  2793.      }
  2794.    
  2795.      async function saveAll() {
  2796.        if (!ctx) return;
  2797.    
  2798.        const payloads = [];
  2799.        if (ctx.keys.kicker) payloads.push({ key: ctx.keys.kicker, text: inKicker.value.trim() });
  2800.        if (ctx.keys.title)  payloads.push({ key: ctx.keys.title,  text: inTitle.value.trim()  });
  2801.        if (ctx.keys.p1)     payloads.push({ key: ctx.keys.p1,     text: inP1.value.trim()     });
  2802.        if (ctx.keys.p2)     payloads.push({ key: ctx.keys.p2,     text: inP2.value.trim()     });
  2803.        if (ctx.keys.cta)    payloads.push({ key: ctx.keys.cta,    text: inCta.value.trim()    });
  2804.        if (ctx.keys.pill1)  payloads.push({ key: ctx.keys.pill1,  text: inPill1.value.trim()  });
  2805.    
  2806.        setLoading(btnSave, true);
  2807.        try {
  2808.          const results = await Promise.all(payloads.map(pl =>
  2809.            fetch(UPDATE_URL, {
  2810.              method: 'POST',
  2811.              headers: { 'Content-Type': 'application/json', 'Accept': 'application/json' },
  2812.              body: JSON.stringify(pl)
  2813.            }).then(r => r.json())
  2814.          ));
  2815.    
  2816.          const bad = results.find(r => !r || r.ok === false);
  2817.          if (bad) throw new Error(bad.error || 'Erreur inconnue');
  2818.    
  2819.          if (ctx.els.kicker) ctx.els.kicker.textContent = inKicker.value.trim();
  2820.          if (ctx.els.title)  ctx.els.title.textContent  = inTitle.value.trim();
  2821.          if (ctx.els.p1)     ctx.els.p1.innerHTML       = inP1.value.trim();
  2822.          if (ctx.els.p2)     ctx.els.p2.innerHTML       = inP2.value.trim();
  2823.          if (ctx.els.cta)    ctx.els.cta.textContent    = inCta.value.trim();
  2824.          if (ctx.els.pill1)  ctx.els.pill1.textContent  = inPill1.value.trim();
  2825.    
  2826.          closeModal();
  2827.        } catch (err) {
  2828.          location.reload();
  2829.          //alert('Modification effectuée!');
  2830.        } finally {
  2831.          setLoading(btnSave, false);
  2832.        }
  2833.      }
  2834.    
  2835.      document.addEventListener('DOMContentLoaded', () => {
  2836.        modal     = $('#actu-editor');
  2837.        if (!modal) { console.warn('[Actu Editor] Modal #actu-editor not found.'); return; }
  2838.        closeEl   = $('.cms-modal__close', modal);
  2839.        btnSave   = $('#ae-save', modal);
  2840.        btnCancel = $('#ae-cancel', modal);
  2841.    
  2842.        inKicker  = $('#ae-kicker', modal);
  2843.        inTitle   = $('#ae-title',  modal);
  2844.        inP1      = $('#ae-p1',     modal);
  2845.        inP2      = $('#ae-p2',     modal);
  2846.        inCta     = $('#ae-cta',    modal);
  2847.        inPill1   = $('#ae-pill1',  modal);
  2848.    
  2849.        document.addEventListener('click', (e) => {
  2850.          const btn = e.target.closest('.cms-actu-edit');
  2851.          if (!btn) return;
  2852.          const root = btn.closest('.actu-hero');
  2853.          if (root) openActuEditor(root);
  2854.        });
  2855.    
  2856.        btnSave?.addEventListener('click', saveAll);
  2857.        btnCancel?.addEventListener('click', closeModal);
  2858.        closeEl?.addEventListener('click', closeModal);
  2859.    
  2860.        modal.addEventListener('click', (e) => { if (e.target === modal) closeModal(); });
  2861.    
  2862.        document.addEventListener('keydown', (e) => { if (!modal.hidden && e.key === 'Escape') closeModal(); });
  2863.      });
  2864.    })();
  2865.    
  2866.    
  2867. </script>
  2868. <style>
  2869.    .cms-modal{ 
  2870.    position: fixed; inset: 0; 
  2871.    background: rgba(0,0,0,.45);
  2872.    display: grid; place-items: center;
  2873.    z-index: 9999;
  2874.    color: #111;
  2875.    }
  2876.    .cms-modal__dialog{
  2877.    background: #fff;
  2878.    width: min(740px, 96vw);
  2879.    max-height: 90vh;
  2880.    border-radius: .75rem;
  2881.    box-shadow: 0 10px 30px rgba(0,0,0,.25);
  2882.    overflow: hidden;
  2883.    display: flex;
  2884.    flex-direction: column;
  2885.    }
  2886.    .cms-modal__header,
  2887.    .cms-modal__footer{
  2888.    flex: 0 0 auto;
  2889.    padding: 12px 16px;
  2890.    background: #f7f7f8;
  2891.    display: flex; align-items: center; justify-content: space-between;
  2892.    }
  2893.    .cms-modal__body{
  2894.    flex: 1 1 auto;
  2895.    padding: 12px 16px;
  2896.    overflow-y: auto;
  2897.    -webkit-overflow-scrolling: touch;
  2898.    }
  2899.    .cms-label{ display: grid; gap: 6px; font-weight: 600; color: #111; }
  2900.    .cms-label input, .cms-label textarea{
  2901.    background: #fff; color: #111;
  2902.    font: inherit; padding: 10px;
  2903.    border: 1px solid #e5e7eb; border-radius: .5rem;
  2904.    }
  2905.    .cms-label input::placeholder, .cms-label textarea::placeholder{ color:#6b7280; }
  2906.    .cms-modal__dialog, .cms-modal__dialog *{ color: #111; }
  2907.    .cms-modal__close{ background:none; border:none; font-size:1.25rem; cursor:pointer }
  2908.    .cms-modal[hidden]{ display:none !important }
  2909.    html.modal-open, body.modal-open{ overflow: hidden; }
  2910.    .actu-hero{ position: relative; }
  2911.    .cms-actu-edit{
  2912.    position: absolute; top: 12px; right: 12px;
  2913.    z-index: 9; 
  2914.    background: #fff; border: 1px solid #e5e7eb; border-radius: .5rem;
  2915.    font-size: .9rem; padding: .15rem .4rem; cursor: pointer;
  2916.    pointer-events: auto;
  2917.    }
  2918.    .actu-shade{ pointer-events: none; }
  2919. </style>
  2920. <script>
  2921.    (function () {
  2922.      // --- Loader helper for the "Enregistrer" button ---
  2923.      function setLoading(btn, isLoading, text = 'Enregistrement…') {
  2924.        if (!btn) return;
  2925.        if (isLoading) {
  2926.          if (!btn.dataset._label) btn.dataset._label = btn.textContent;
  2927.          btn.disabled = true;
  2928.          btn.setAttribute('aria-busy', 'true');
  2929.          btn.innerHTML =
  2930.            '<svg width="16" height="16" viewBox="0 0 50 50" aria-hidden="true" focusable="false" style="vertical-align:-2px;margin-right:8px;">' +
  2931.              '<circle cx="25" cy="25" r="20" fill="none" stroke="currentColor" stroke-width="6" stroke-opacity="0.25"></circle>' +
  2932.              '<path d="M25 5 a20 20 0 0 1 0 40" stroke="currentColor" stroke-width="6" fill="none">' +
  2933.                '<animateTransform attributeName="transform" type="rotate" from="0 25 25" to="360 25 25" dur="0.8s" repeatCount="indefinite"></animateTransform>' +
  2934.              '</path>' +
  2935.            '</svg>' + text;
  2936.        } else {
  2937.          btn.disabled = false;
  2938.          btn.removeAttribute('aria-busy');
  2939.          btn.textContent = btn.dataset._label || 'Enregistrer';
  2940.        }
  2941.      }
  2942.    
  2943.      const UPDATE_URL = "{{ path('cms_text_update') }}";
  2944.      const $ = (sel, root=document) => root.querySelector(sel);
  2945.    
  2946.      let modal, closeEl, btnSave, btnCancel;
  2947.      let inTitle, inV1, inL1, inV2, inL2, inV3, inL3, inV4, inL4, inV5, inL5, inImg1, inImg2, inImg3, inImg4, inImg5;
  2948.      let ctx = null;
  2949.    
  2950.      function openEditor(root) {
  2951.        const els = {
  2952.          title: $('#chiffres-title', root),
  2953.          v1:    $('#chiffre1-value', root),  l1: $('#chiffre1-label', root),
  2954.          v2:    $('#chiffre2-value', root),  l2: $('#chiffre2-label', root),
  2955.          v3:    $('#chiffre3-value', root),  l3: $('#chiffre3-label', root),
  2956.          v4:    $('#chiffre4-value', root),  l4: $('#chiffre4-label', root),
  2957.          v5:    $('#chiffre5-value', root),  l5: $('#chiffre5-label', root),
  2958.          img1:  $('li:nth-child(1) img', root),
  2959.          img2:  $('li:nth-child(2) img', root),
  2960.          img3:  $('li:nth-child(3) img', root),
  2961.          img4:  $('li:nth-child(4) img', root),
  2962.          img5:  $('li:nth-child(5) img', root),
  2963.        };
  2964.        const keys = {
  2965.          title: root.dataset.titleKey || '',
  2966.          v1:    root.dataset.v1Key    || '', l1: root.dataset.l1Key || '',
  2967.          v2:    root.dataset.v2Key    || '', l2: root.dataset.l2Key || '',
  2968.          v3:    root.dataset.v3Key    || '', l3: root.dataset.l3Key || '',
  2969.          v4:    root.dataset.v4Key    || '', l4: root.dataset.l4Key || '',
  2970.          v5:    root.dataset.v5Key    || '', l5: root.dataset.l5Key || '',
  2971.          img1:  root.dataset.img1Key  || '',
  2972.          img2:  root.dataset.img2Key  || '',
  2973.          img3:  root.dataset.img3Key  || '',
  2974.          img4:  root.dataset.img4Key  || '',
  2975.          img5:  root.dataset.img5Key  || '',
  2976.        };
  2977.    
  2978.        ctx = { root, els, keys };
  2979.    
  2980.        inTitle.value = (els.title?.textContent || '').trim();
  2981.        inV1.value    = (els.v1?.textContent    || '').trim();
  2982.        inL1.value    = (els.l1?.textContent    || '').trim();
  2983.        inV2.value    = (els.v2?.textContent    || '').trim();
  2984.        inL2.value    = (els.l2?.textContent    || '').trim();
  2985.        inV3.value    = (els.v3?.textContent    || '').trim();
  2986.        inL3.value    = (els.l3?.textContent    || '').trim();
  2987.        inV4.value    = (els.v4?.textContent    || '').trim();
  2988.        inL4.value    = (els.l4?.textContent    || '').trim();
  2989.        inV5.value    = (els.v5?.textContent    || '').trim();
  2990.        inL5.value    = (els.l5?.textContent    || '').trim();
  2991.        inImg1.value  = els.img1?.getAttribute('src') || '';
  2992.        inImg2.value  = els.img2?.getAttribute('src') || '';
  2993.        inImg3.value  = els.img3?.getAttribute('src') || '';
  2994.        inImg4.value  = els.img4?.getAttribute('src') || '';
  2995.        inImg5.value  = els.img5?.getAttribute('src') || '';
  2996.    
  2997.        modal.hidden = false;
  2998.        document.documentElement.classList.add('modal-open');
  2999.        document.body.classList.add('modal-open');
  3000.        inTitle.focus();
  3001.      }
  3002.    
  3003.      function closeModal() {
  3004.        modal.hidden = true;
  3005.        document.documentElement.classList.remove('modal-open');
  3006.        document.body.classList.remove('modal-open');
  3007.        ctx = null;
  3008.      }
  3009.    
  3010.      async function saveAll() {
  3011.        if (!ctx) return;
  3012.    
  3013.        const payloads = [];
  3014.        if (ctx.keys.title) payloads.push({ key: ctx.keys.title, text: inTitle.value.trim() });
  3015.        if (ctx.keys.v1) payloads.push({ key: ctx.keys.v1, text: inV1.value.trim() });
  3016.        if (ctx.keys.l1) payloads.push({ key: ctx.keys.l1, text: inL1.value.trim() });
  3017.        if (ctx.keys.v2) payloads.push({ key: ctx.keys.v2, text: inV2.value.trim() });
  3018.        if (ctx.keys.l2) payloads.push({ key: ctx.keys.l2, text: inL2.value.trim() });
  3019.        if (ctx.keys.v3) payloads.push({ key: ctx.keys.v3, text: inV3.value.trim() });
  3020.        if (ctx.keys.l3) payloads.push({ key: ctx.keys.l3, text: inL3.value.trim() });
  3021.        if (ctx.keys.v4) payloads.push({ key: ctx.keys.v4, text: inV4.value.trim() });
  3022.        if (ctx.keys.l4) payloads.push({ key: ctx.keys.l4, text: inL4.value.trim() });
  3023.        if (ctx.keys.v5) payloads.push({ key: ctx.keys.v5, text: inV5.value.trim() });
  3024.        if (ctx.keys.l5) payloads.push({ key: ctx.keys.l5, text: inL5.value.trim() });
  3026.        if (ctx.keys.img1) payloads.push({ key: ctx.keys.img1, text: inImg1.value.trim() });
  3027.        if (ctx.keys.img2) payloads.push({ key: ctx.keys.img2, text: inImg2.value.trim() });
  3028.        if (ctx.keys.img3) payloads.push({ key: ctx.keys.img3, text: inImg3.value.trim() });
  3029.        if (ctx.keys.img4) payloads.push({ key: ctx.keys.img4, text: inImg4.value.trim() });
  3030.        if (ctx.keys.img5) payloads.push({ key: ctx.keys.img5, text: inImg5.value.trim() });
  3031.    
  3032.        setLoading(btnSave, true);
  3033.        try {
  3034.          const results = await Promise.all(payloads.map(pl =>
  3035.            fetch(UPDATE_URL, {
  3036.              method:'POST', headers:{'Content-Type':'application/json','Accept':'application/json'},
  3037.              body: JSON.stringify(pl)
  3038.            }).then(r=>r.json())
  3039.          ));
  3040.          const bad = results.find(r => !r || r.ok === false);
  3041.          if (bad) throw new Error(bad.error || 'Erreur inconnue');
  3042.    
  3043.          if (ctx.els.title) ctx.els.title.textContent = inTitle.value.trim();
  3044.          if (ctx.els.v1) ctx.els.v1.textContent = inV1.value.trim();
  3045.          if (ctx.els.l1) ctx.els.l1.textContent = inL1.value.trim();
  3046.          if (ctx.els.v2) ctx.els.v2.textContent = inV2.value.trim();
  3047.          if (ctx.els.l2) ctx.els.l2.textContent = inL2.value.trim();
  3048.          if (ctx.els.v3) ctx.els.v3.textContent = inV3.value.trim();
  3049.          if (ctx.els.l3) ctx.els.l3.textContent = inL3.value.trim();
  3050.          if (ctx.els.v4) ctx.els.v4.textContent = inV4.value.trim();
  3051.          if (ctx.els.l4) ctx.els.l4.textContent = inL4.value.trim();
  3052.          if (ctx.els.v5) ctx.els.v5.textContent = inV5.value.trim();
  3053.          if (ctx.els.l5) ctx.els.l5.textContent = inL5.value.trim();
  3055.          if (ctx.els.img1 && inImg1.value.trim()) ctx.els.img1.setAttribute('src', inImg1.value.trim());
  3056.          if (ctx.els.img2 && inImg2.value.trim()) ctx.els.img2.setAttribute('src', inImg2.value.trim());
  3057.          if (ctx.els.img3 && inImg3.value.trim()) ctx.els.img3.setAttribute('src', inImg3.value.trim());
  3058.          if (ctx.els.img4 && inImg4.value.trim()) ctx.els.img4.setAttribute('src', inImg4.value.trim());
  3059.          if (ctx.els.img5 && inImg5.value.trim()) ctx.els.img5.setAttribute('src', inImg5.value.trim());
  3060.    
  3061.          closeModal();
  3062.        } catch (err) {
  3063.          location.reload();
  3064.          //alert('Modification effectuée!');
  3065.        } finally {
  3066.          setLoading(btnSave, false);
  3067.        }
  3068.      }
  3069.    
  3070.      document.addEventListener('DOMContentLoaded', () => {
  3071.        modal = document.querySelector('#kpis-editor');
  3072.        if (!modal) return;
  3073.    
  3074.        closeEl   = modal.querySelector('.cms-modal__close');
  3075.        btnSave   = modal.querySelector('#kpe-save');
  3076.        btnCancel = modal.querySelector('#kpe-cancel');
  3077.    
  3078.        inTitle = modal.querySelector('#kpe-title');
  3079.        inV1 = modal.querySelector('#kpe-v1'); inL1 = modal.querySelector('#kpe-l1');
  3080.        inV2 = modal.querySelector('#kpe-v2'); inL2 = modal.querySelector('#kpe-l2');
  3081.        inV3 = modal.querySelector('#kpe-v3'); inL3 = modal.querySelector('#kpe-l3');
  3082.        inV4 = modal.querySelector('#kpe-v4'); inL4 = modal.querySelector('#kpe-l4');
  3083.         inV5 = modal.querySelector('#kpe-v5'); inL5 = modal.querySelector('#kpe-l5');
  3085.        inImg1 = modal.querySelector('#kpe-img1');
  3086.        inImg2 = modal.querySelector('#kpe-img2');
  3087.        inImg3 = modal.querySelector('#kpe-img3');
  3088.        inImg4 = modal.querySelector('#kpe-img4');
  3089.        inImg5 = modal.querySelector('#kpe-img5');
  3090.    
  3091.        document.addEventListener('click', (e) => {
  3092.          const btn = e.target.closest('.cms-kpis-edit');
  3093.          if (!btn) return;
  3094.          const root = btn.closest('.chiffres__panel');
  3095.          if (root) openEditor(root);
  3096.        });
  3097.    
  3098.        btnSave?.addEventListener('click', saveAll);
  3099.        btnCancel?.addEventListener('click', closeModal);
  3100.        closeEl?.addEventListener('click', closeModal);
  3101.        modal.addEventListener('click', (e) => { if (e.target === modal) closeModal(); });
  3102.        document.addEventListener('keydown', (e) => { if (!modal.hidden && e.key === 'Escape') closeModal(); });
  3103.      });
  3104.    })();
  3105.    
  3106.    
  3107. </script>
  3108. {# --------------------------- TRUST (logos + headings) --------------------------- #}
  3109. <section class="trust">
  3110.    <div class="container">
  3111.       <p class="trust__kicker" style="font-size:20px;">ILS NOUS FONT CONFIANCE&nbsp;!</p>
  3112.       {% set trustPartners = [
  3113.       { src: 'assets/img/mimethys.webp', alt: 'Mimethys' },
  3114.       { src: 'assets/img/pegase.webp', alt: 'Pegase Processus' },
  3115.       { src: 'assets/img/gepi.webp', alt: 'GEPI Conseil' },
  3116.       { src: 'assets/img/poste.png', alt: 'La Poste' }
  3117.       ] %}
  3118.       {% set trustApprovals = [
  3119.       { src: 'assets/img/iprp.jpg', alt: 'IPRP' },
  3120.       { src: 'assets/img/agefiph.png', alt: 'Agefiph' }
  3121.       ] %}
  3123.       <div class="trust__group">
  3124.          <h3 class="trust__label" style="font-size:18px;" >Nos partenaires</h3>
  3125.          <div class="trust__logos">
  3126.             {% for logo in trustPartners %}
  3127.             <img src="{{ asset(logo.src) }}" alt="{{ logo.alt }}" class="logo">
  3128.             {% endfor %}
  3129.          </div>
  3130.       </div>
  3132.       <div class="trust__group">
  3133.          <h3 class="trust__label" style="font-size:18px;">Nos agréments et habilitations</h3>
  3134.          <div class="trust__logos">
  3135.             {% for logo in trustApprovals %}
  3136.             <img src="{{ asset(logo.src) }}" alt="{{ logo.alt }}" class="logo">
  3137.             {% endfor %}
  3138.          </div>
  3139.       </div>
  3140.    </div>
  3141. </section>
  3142. {# ==== CHIFFRES CLÉS ==== #}
  3143. <section class="chiffres" aria-labelledby="chiffres-title">
  3144.    <div class="container">
  3145.       <div class="narrow">
  3146.          <div class="chiffres__panel"
  3147.             data-title-key="kpis_title"
  3148.             data-v1-key="chiffre_cles_card1_value" data-l1-key="chiffre_cles_card1_label" data-img1-key="kpis_img1"
  3149.             data-v2-key="chiffre_cles_card2_value" data-l2-key="chiffre_cles_card2_label" data-img2-key="kpis_img2"
  3150.             data-v3-key="chiffre_cles_card3_value" data-l3-key="chiffre_cles_card3_label" data-img3-key="kpis_img3"
  3151.             data-v4-key="chiffre_cles_card4_value" data-l4-key="chiffre_cles_card4_label" data-img4-key="kpis_img4"
  3152.             data-v5-key="chiffre_cles_card5_value" data-l5-key="chiffre_cles_card5_label" data-img5-key="kpis_img5">
  3153.             <button class="cms-kpis-edit" type="button" aria-label="Éditer les chiffres">✏️</button>
  3154.             <h2 id="chiffres-title" class="chiffres__title">
  3155.                {{ (kpis is defined and kpis.title is defined) ? kpis.title : ('Nos chiffres clés !'|trans) }}
  3156.             </h2>
  3157.             {% set items = [
  3158.             {
  3159.             img: 'pexels-fauxels-3182831.png',
  3160.             value: (kpis is defined and kpis.items is defined and kpis.items[0] is defined) ? kpis.items[0].value : chiffre_cles_card1_value,
  3161.             label: (kpis is defined and kpis.items is defined and kpis.items[0] is defined) ? kpis.items[0].label : chiffre_cles_card1_label
  3162.             },
  3163.             {
  3164.             img: 'pexels-growthgal-3719037.png',
  3165.             value: (kpis is defined and kpis.items is defined and kpis.items[1] is defined) ? kpis.items[1].value : chiffre_cles_card2_value,
  3166.             label: (kpis is defined and kpis.items is defined and kpis.items[1] is defined) ? kpis.items[1].label : chiffre_cles_card2_label
  3167.             },
  3168.             {
  3169.             img: 'pexels-shkrabaanthony-5292192.png',
  3170.             value: (kpis is defined and kpis.items is defined and kpis.items[2] is defined) ? kpis.items[2].value : chiffre_cles_card3_value,
  3171.             label: (kpis is defined and kpis.items is defined and kpis.items[2] is defined) ? kpis.items[2].label : chiffre_cles_card3_label
  3172.             },
  3173.             {
  3174.             img: 'pexels-4.png',
  3175.             value: (kpis is defined and kpis.items is defined and kpis.items[3] is defined) ? kpis.items[3].value : chiffre_cles_card4_value,
  3176.             label: (kpis is defined and kpis.items is defined and kpis.items[3] is defined) ? kpis.items[3].label : chiffre_cles_card4_label
  3177.             },
  3178.             {
  3179.             img: 'pexels-5.png',
  3180.             value: (kpis is defined and kpis.items is defined and kpis.items[4] is defined) ? kpis.items[4].value : chiffre_cles_card5_value,
  3181.             label: (kpis is defined and kpis.items is defined and kpis.items[4] is defined) ? kpis.items[4].label : chiffre_cles_card5_label
  3182.             }
  3183.             ] %}
  3184.             <ul class="chiffres__grid" role="list">
  3185.                <li>
  3186.                   <figure class="chiffre">
  3187.                      <div class="chiffre__media">
  3188.                         <img src="{{ asset(kpis.items[0].img) }}" alt="">
  3189.                         <figcaption class="chiffre__content">
  3190.                            <span class="chiffre__value" id="chiffre1-value">{{ items[0].value }}</span>
  3191.                            <span class="chiffre__label" id="chiffre1-label">{{ items[0].label }}</span>
  3192.                         </figcaption>
  3193.                      </div>
  3194.                   </figure>
  3195.                </li>
  3196.                <li>
  3197.                   <figure class="chiffre">
  3198.                      <div class="chiffre__media">
  3199.                         <img src="{{ asset(kpis.items[1].img) }}" alt="">
  3200.                         <figcaption class="chiffre__content">
  3201.                            <span class="chiffre__value" id="chiffre2-value">{{ items[1].value }}</span>
  3202.                            <span class="chiffre__label" id="chiffre2-label">{{ items[1].label }}</span>
  3203.                         </figcaption>
  3204.                      </div>
  3205.                   </figure>
  3206.                </li>
  3207.                <li>
  3208.                   <figure class="chiffre">
  3209.                      <div class="chiffre__media">
  3210.                         <img src="{{ asset(kpis.items[2].img) }}" alt="">
  3211.                         <figcaption class="chiffre__content">
  3212.                            <span class="chiffre__value" id="chiffre3-value">{{ items[2].value }}</span>
  3213.                            <span class="chiffre__label" id="chiffre3-label">{{ items[2].label }}</span>
  3214.                         </figcaption>
  3215.                      </div>
  3216.                   </figure>
  3217.                </li>
  3218.                <li>
  3219.                   <figure class="chiffre">
  3220.                      <div class="chiffre__media">
  3221.                         <img src="{{ asset(kpis.items[3].img) }}" alt="">
  3222.                         <figcaption class="chiffre__content">
  3223.                            <span class="chiffre__value" id="chiffre4-value">{{ items[3].value }}</span>
  3224.                            <span class="chiffre__label" id="chiffre4-label">{{ items[3].label }}</span>
  3225.                         </figcaption>
  3226.                      </div>
  3227.                   </figure>
  3228.                </li>
  3229.                <li>
  3230.                   <figure class="chiffre">
  3231.                      <div class="chiffre__media">
  3232.                         <img src="{{ asset(kpis.items[4].img) }}" alt="">
  3233.                         <figcaption class="chiffre__content">
  3234.                            <span class="chiffre__value" id="chiffre5-value">{{ items[4].value }}</span>
  3235.                            <span class="chiffre__label" id="chiffre5-label">{{ items[4].label }}</span>
  3236.                         </figcaption>
  3237.                      </div>
  3238.                   </figure>
  3239.                </li>
  3240.             </ul>
  3241.             <div class="only-mobile">
  3242.                <div class="chiffres__carousel" aria-roledescription="carousel">
  3243.                   <div class="chiffres__viewport">
  3244.                      <ul class="chiffres__track" id="kpis-track" role="listbox" aria-label="Chiffres clés">
  3245.                         <li class="chiffres__slide" role="option" aria-selected="true">
  3246.                            <figure class="chiffre">
  3247.                               <div class="chiffre__media">
  3248.                                  <img src="{{ asset(kpis.items[0].img) }}" alt="">
  3249.                                  <figcaption class="chiffre__content">
  3250.                                     <span class="chiffre__value">{{ items[0].value }}</span>
  3251.                                     <span class="chiffre__label">{{ items[0].label }}</span>
  3252.                                  </figcaption>
  3253.                               </div>
  3254.                            </figure>
  3255.                         </li>
  3256.                         <li class="chiffres__slide" role="option" aria-selected="false">
  3257.                            <figure class="chiffre">
  3258.                               <div class="chiffre__media">
  3259.                                  <img src="{{ asset(kpis.items[1].img) }}" alt="">
  3260.                                  <figcaption class="chiffre__content">
  3261.                                     <span class="chiffre__value">{{ items[1].value }}</span>
  3262.                                     <span class="chiffre__label">{{ items[1].label }}</span>
  3263.                                  </figcaption>
  3264.                               </div>
  3265.                            </figure>
  3266.                         </li>
  3267.                         <li class="chiffres__slide" role="option" aria-selected="false">
  3268.                            <figure class="chiffre">
  3269.                               <div class="chiffre__media">
  3270.                                  <img src="{{ asset(kpis.items[2].img) }}" alt="">
  3271.                                  <figcaption class="chiffre__content">
  3272.                                     <span class="chiffre__value">{{ items[2].value }}</span>
  3273.                                     <span class="chiffre__label">{{ items[2].label }}</span>
  3274.                                  </figcaption>
  3275.                               </div>
  3276.                            </figure>
  3277.                         </li>
  3278.                         <li class="chiffres__slide" role="option" aria-selected="false">
  3279.                            <figure class="chiffre">
  3280.                               <div class="chiffre__media">
  3281.                                  <img src="{{ asset(kpis.items[3].img) }}" alt="">
  3282.                                  <figcaption class="chiffre__content">
  3283.                                     <span class="chiffre__value">{{ items[3].value }}</span>
  3284.                                     <span class="chiffre__label">{{ items[3].label }}</span>
  3285.                                  </figcaption>
  3286.                               </div>
  3287.                            </figure>
  3288.                         </li>
  3289.                         <li class="chiffres__slide" role="option" aria-selected="false">
  3290.                            <figure class="chiffre">
  3291.                               <div class="chiffre__media">
  3292.                                  <img src="{{ asset(kpis.items[4].img) }}" alt="">
  3293.                                  <figcaption class="chiffre__content">
  3294.                                     <span class="chiffre__value">{{ items[4].value }}</span>
  3295.                                     <span class="chiffre__label">{{ items[4].label }}</span>
  3296.                                  </figcaption>
  3297.                               </div>
  3298.                            </figure>
  3299.                         </li>
  3300.                      </ul>
  3301.                      <button class="chiffres__arrow chiffres__arrow--prev" type="button" aria-label="Diapo précédente">‹</button>
  3302.                      <button class="chiffres__arrow chiffres__arrow--next" type="button" aria-label="Diapo suivante">›</button>
  3303.                   </div>
  3304.                   <div class="chiffres__dots" aria-label="Pagination"></div>
  3305.                  
  3306.                </div>
  3307.             </div>
  3308.          </div>
  3309.          <div id="kpis-editor" class="cms-modal" hidden>
  3310.             <div class="cms-modal__dialog" role="dialog" aria-modal="true" aria-labelledby="kpe-title-label">
  3311.                <div class="cms-modal__header">
  3312.                   <strong id="kpe-title-label">Éditer les chiffres</strong>
  3313.                   <button type="button" class="cms-modal__close" aria-label="Fermer">×</button>
  3314.                </div>
  3315.                <div class="cms-modal__body">
  3316.                   <label class="cms-label">Titre
  3317.                   <input id="kpe-title" type="text" autocomplete="off">
  3318.                   </label>
  3319.                   <fieldset class="cms-fieldset">
  3320.                      <legend>Carte 1</legend>
  3321.                      <label class="cms-label">Valeur <input id="kpe-v1" type="text" autocomplete="off"></label>
  3322.                      <label class="cms-label">Label  <input id="kpe-l1" type="text" autocomplete="off"></label>
  3323.                   </fieldset>
  3324.                   <fieldset class="cms-fieldset">
  3325.                      <legend>Carte 2</legend>
  3326.                      <label class="cms-label">Valeur <input id="kpe-v2" type="text" autocomplete="off"></label>
  3327.                      <label class="cms-label">Label  <input id="kpe-l2" type="text" autocomplete="off"></label>
  3328.                   </fieldset>
  3329.                   <fieldset class="cms-fieldset">
  3330.                      <legend>Carte 3</legend>
  3331.                      <label class="cms-label">Valeur <input id="kpe-v3" type="text" autocomplete="off"></label>
  3332.                      <label class="cms-label">Label  <input id="kpe-l3" type="text" autocomplete="off"></label>
  3333.                   </fieldset>
  3334.                   <fieldset class="cms-fieldset">
  3335.                      <legend>Carte 4</legend>
  3336.                      <label class="cms-label">Valeur <input id="kpe-v4" type="text" autocomplete="off"></label>
  3337.                      <label class="cms-label">Label  <input id="kpe-l4" type="text" autocomplete="off"></label>
  3338.                   </fieldset>
  3339.                   <fieldset class="cms-fieldset">
  3340.                      <legend>Carte 5</legend>
  3341.                      <label class="cms-label">Valeur <input id="kpe-v5" type="text" autocomplete="off"></label>
  3342.                      <label class="cms-label">Label  <input id="kpe-l5" type="text" autocomplete="off"></label>
  3343.                   </fieldset>
  3344.                   <fieldset class="cms-fieldset">
  3345.                      <legend>Images</legend>
  3346.                      <label class="cms-label">
  3347.                         Carte 1 — Image
  3348.                         <div class="cms-img-row">
  3349.                            <input id="kpe-img1" type="text" placeholder="ex: assets/img/visuel1.png">
  3350.                            <input id="kpe-file1" type="file" accept="image/png,image/jpeg,image/webp">
  3351.                         </div>
  3352.                      </label>
  3353.                      <label class="cms-label">
  3354.                         Carte 2 — Image
  3355.                         <div class="cms-img-row">
  3356.                            <input id="kpe-img2" type="text" placeholder="ex: assets/img/visuel2.png">
  3357.                            <input id="kpe-file2" type="file" accept="image/png,image/jpeg,image/webp">
  3358.                         </div>
  3359.                      </label>
  3360.                      <label class="cms-label">
  3361.                         Carte 3 — Image
  3362.                         <div class="cms-img-row">
  3363.                            <input id="kpe-img3" type="text" placeholder="ex: assets/img/visuel3.png">
  3364.                            <input id="kpe-file3" type="file" accept="image/png,image/jpeg,image/webp">
  3365.                         </div>
  3366.                      </label>
  3367.                      <label class="cms-label">
  3368.                         Carte 4 — Image
  3369.                         <div class="cms-img-row">
  3370.                            <input id="kpe-img4" type="text" placeholder="ex: assets/img/visuel4.png">
  3371.                            <input id="kpe-file4" type="file" accept="image/png,image/jpeg,image/webp">
  3372.                         </div>
  3373.                      </label>
  3374.                      <label class="cms-label">
  3375.                         Carte 5 — Image
  3376.                         <div class="cms-img-row">
  3377.                            <input id="kpe-img5" type="text" placeholder="ex: assets/img/visuel5.png">
  3378.                            <input id="kpe-file5" type="file" accept="image/png,image/jpeg,image/webp">
  3379.                         </div>
  3380.                      </label>
  3381.                   </fieldset>
  3382.                </div>
  3383.                <div class="cms-modal__footer">
  3384.                   <button type="button" class="btn btn-secondary" id="kpe-cancel">Annuler</button>
  3385.                   <button type="button" class="btn btn-primary" id="kpe-save">Enregistrer</button>
  3386.                </div>
  3387.             </div>
  3388.          </div>
  3389.       </div>
  3390.    </div>
  3391. </section>
  3392. <style>
  3393.    .only-desktop { display: none; }
  3394.    .only-mobile  { display: block; }
  3395.    @media (min-width: 992px){
  3396.    .only-desktop { display: block !important; }
  3397.    .only-mobile  { display: none  !important; }
  3398.    }
  3399.    .only-mobile .chiffres__viewport{
  3400.    width: min(620px, 96vw);
  3401.    margin-inline:auto;
  3402.    overflow:hidden;
  3403.    position:relative;
  3404.    }
  3405.    .only-mobile .chiffres__track{
  3406.    display:flex; gap:0; transition:.45s ease; will-change:transform;
  3407.    }
  3408.    .only-mobile .chiffres__slide{
  3409.    flex:0 0 100%; min-width:100%;
  3410.    display:flex; justify-content:center;
  3411.    }
  3412.    .only-mobile .chiffre__media{
  3413.    width:92%; max-width:560px; aspect-ratio:4/5; border-radius:28px;
  3414.    overflow:hidden; box-shadow:0 10px 30px rgba(0,0,0,.35);
  3415.    }
  3416.    .only-mobile .chiffre__media img{ width:100%; height:100%; object-fit:cover; }
  3417.    .only-mobile .chiffre__media::after{
  3418.    content:""; position:absolute; inset:0;
  3419.    background:linear-gradient(180deg, rgba(0,0,0,.25) 20%, rgba(0,0,0,.55) 80%);
  3420.    }
  3421.    .only-mobile .chiffre__content{
  3422.    position:absolute; left:18px; right:18px; bottom:18px; z-index:1; color:#fff;
  3423.    text-shadow:0 2px 6px rgba(0,0,0,.45);
  3424.    }
  3425.    .only-mobile .chiffre__value{ display:block; font-weight:800; font-size:clamp(26px, 7vw, 34px); line-height:1.05; }
  3426.    .only-mobile .chiffre__label{ display:block; font-size:13px; }
  3427.    .only-mobile .chiffres__arrow{
  3428.    position:absolute; width:44px; height:44px; border-radius:50%; border:0;
  3429.    background:#fff; color:#1c2d4a; font-size:28px; display:grid; place-items:center;
  3430.    box-shadow:0 8px 18px rgba(0,0,0,.25);
  3431.    transform:translate(-50%, -50%);
  3432.    z-index:3;
  3433.    }
  3434.    .only-mobile .chiffres__dots{ display:flex; justify-content:center; gap:8px; margin-top:10px; }
  3435.    .only-mobile .chiffres__dots button{ width:8px; height:8px; border:0; border-radius:50%; background:#d9dde7; opacity:.7; }
  3436.    .only-mobile .chiffres__dots button[aria-current="true"]{ opacity:1; background:#fff; transform:scale(1.15); }
  3437.    .only-mobile .chiffres__cta{ display:flex; justify-content:center; margin-top:8px; }
  3438.    .only-mobile .btn.btn-light{ background:#fff; color:#0a2a54; border:0; padding:8px 16px; border-radius:8px; font-weight:700; }
  3439.    .only-desktop { display: none !important; }  
  3440.    .only-mobile  { display: block !important; }
  3441.    @media (min-width: 992px){
  3442.    .only-desktop { display: grid !important; }
  3443.    .only-mobile  { display: none !important; } 
  3444.    }
  3445.    @media (max-width: 991.98px){
  3446.    .chiffres__panel > .chiffres__grid { display: none !important; } 
  3447.    }
  3448.    @media (min-width: 992px){
  3449.    .chiffres__panel .only-mobile { display: none !important; }   
  3450.    }
  3451.    @media (max-width: 991.98px){
  3452.    .chiffres .chiffres__title{
  3453.    text-align: center !important;
  3454.    margin: 0 auto 18px !important;
  3455.    display: block;         
  3456.    width: 100%;
  3457.    }
  3458.    }
  3459.    @media (max-width: 991.98px){
  3460.    .catalogue .catalogue-grid{
  3461.    display: flex;
  3462.    flex-direction: column;
  3463.    align-items: center;    
  3464.    }
  3465.    .catalogue .catalogue-art{ order: -1;  display:flex; justify-content:center; }
  3466.    .catalogue .cat-card{
  3467.    width: min(82vw, 320px);         
  3468.    aspect-ratio: 3 / 4;
  3469.    border-radius: 16px;
  3470.    overflow: hidden;
  3471.    box-shadow: 0 12px 30px rgba(0,0,0,.2);
  3472.    position: relative;
  3473.    }
  3474.    .catalogue .cat-card {
  3475.    aspect-ratio: 3 / 4;
  3476.    }
  3477.    .catalogue .catalogue-copy{
  3478.    order: 0;                        
  3479.    width: 100%;
  3480.    }
  3481.    .catalogue .catalogue-copy .catalogue-text-wrap{
  3482.    max-width: 560px;
  3483.    margin: 0 auto;
  3484.    padding: 0 16px;                   
  3485.    text-align: left;                  
  3486.    }
  3487.    .catalogue .catalogue-copy .sec-title{
  3488.    color: #ff6a3d;
  3489.    font-weight: 800;
  3490.    line-height: 1.3;
  3491.    font-size: clamp(18px, 4.8vw, 22px);
  3492.    margin: 12px 0 10px;
  3493.    text-transform: uppercase;
  3494.    }
  3495.    .catalogue .catalogue-copy .sec-text{
  3496.    font-size: 14px;
  3497.    line-height: 1.6;
  3498.    margin: 0 0 10px;
  3499.    }
  3500.    .catalogue .catalogue-copy .btn-row{
  3501.    display: flex;
  3502.    justify-content: center;
  3503.    align-items: center;
  3504.    gap: 12px;
  3505.    flex-wrap: wrap;
  3506.    margin-top: 8px;
  3507.    }
  3508.    .catalogue .catalogue-grid > *{ margin: 0; }
  3509.    }
  3510.    @media (max-width: 991.98px){
  3511.    .trust{
  3512.    background:#fff;           
  3513.    padding: 18px 0 28px;
  3514.    }
  3515.    .trust .trust__kicker{
  3516.    text-align:center;
  3517.    margin: 0 0 20px;
  3518.    font-weight:800;
  3519.    font-size:14px;
  3520.    color:#ff6a3d;            
  3521.    text-transform:uppercase;
  3522.    letter-spacing:.2px;
  3523.    }
  3524.    .trust .trust__group + .trust__group{ margin-top:28px; }
  3525.    .trust .trust__label{
  3526.    margin:0 0 16px;
  3527.    font-size:18px;
  3528.    }
  3529.    .trust .trust__logos{
  3530.    display:grid;
  3531.    grid-template-columns: repeat(2, minmax(0, 1fr));
  3532.    justify-items:center;
  3533.    gap: 22px 36px;            
  3534.    max-width: 320px;          
  3535.    margin: 0 auto;           
  3536.    }
  3537.    .trust .trust__logos .logo{
  3538.    width: 72px;               
  3539.    height: auto;
  3540.    object-fit: contain;
  3541.    display:block;
  3542.    }
  3543.    }
  3544.    @media (max-width: 991.98px){
  3545.    .competences .panel--blue{
  3546.    position: relative;
  3547.    border-radius: 12px;
  3548.    overflow: hidden;
  3549.    padding: 24px 16px 18px;
  3550.    }
  3551.    .competences .panel--blue::after{
  3552.    content:"";
  3553.    position:absolute; inset:0;
  3554.    background: rgba(13, 44, 88, .55);
  3555.    pointer-events:none;
  3556.    }
  3557.    .competences .sec-title{
  3558.    position: relative;         
  3559.    z-index: 1;
  3560.    color:#fff;
  3561.    text-align:center;
  3562.    text-transform: uppercase;
  3563.    letter-spacing:.02em;
  3564.    font-weight:800;
  3565.    font-size: 14px;
  3566.    margin: 0 0 14px;
  3567.    }
  3568.    .competences .competences-grid{
  3569.    position: relative; z-index: 1;
  3570.    display: grid !important;
  3571.    grid-template-columns: 1fr !important;  
  3572.    gap: 12px;
  3573.    max-width: 340px;
  3574.    margin: 0 auto;
  3575.    }
  3576.    .competences .comp-card{
  3577.    display: grid;
  3578.    grid-template-columns: 34px 1fr;
  3579.    align-items: center;
  3580.    column-gap: 12px;
  3581.    padding: 10px 12px;
  3582.    border-radius: 12px;
  3583.    background: rgba(255,255,255,.08);      
  3584.    backdrop-filter: blur(1px);
  3585.    }
  3586.    .competences .comp-icon{
  3587.    width: 28px; height: 28px; object-fit: contain;
  3588.    filter: brightness(1.05);
  3589.    }
  3590.    .competences .comp-card p{
  3591.    margin: 0;
  3592.    color:#fff;
  3593.    font-weight: 700;
  3594.    font-size: 13px;
  3595.    line-height: 1.45;
  3596.    }
  3597.    .competences .center{
  3598.    position: relative; z-index: 1;
  3599.    margin-top: 16px !important;
  3600.    display: flex; justify-content: center;
  3601.    }
  3602.    .competences .btn.btn-secondary{
  3603.    background:#fff; color:#0A2A45; border:0;
  3604.    border-radius: 8px; padding: 8px 16px; font-weight: 700;
  3605.    box-shadow: 0 6px 14px rgba(0,0,0,.18);
  3606.    }
  3607.    }
  3608.    .prestations--overimg .presta-card{
  3609.    position: relative;
  3610.    isolation: isolate;                        
  3611.    border-radius: 24px;
  3612.    overflow: hidden;
  3613.    padding: 24px;
  3614.    background: var(--img) center/cover no-repeat;
  3615.    background-clip: border-box;
  3616.    }
  3617.    .prestations--overimg .presta-card::after{
  3618.    content:"";
  3619.    position: absolute;
  3620.    inset: 0;
  3621.    z-index: 0;                                
  3622.    pointer-events: none;
  3623.    background:
  3624.    linear-gradient(180deg,
  3625.    rgba(10,43,88,0.15) 0%,
  3626.    rgba(10,43,88,0.45) 40%,
  3627.    rgba(10,43,88,0.78) 100%);
  3628.    }
  3629.    .prestations--overimg .presta-inner{
  3630.    position: relative;
  3631.    z-index: 1;                                 
  3632.    display:flex;
  3633.    flex-direction:column;
  3634.    justify-content:flex-start;
  3635.    height:100%;
  3636.    color: #fff;
  3637.    text-shadow: 0 2px 6px rgba(0,0,0,.45);
  3638.    }
  3639.    .prestations--overimg .presta-inner h3,
  3640.    .prestations--overimg .presta-inner p{ color:#fff; }
  3641.    @media (min-width: 992px){
  3642.    .chiffres__grid{
  3643.    display: flex;
  3644.    flex-wrap: wrap;
  3645.    justify-content: center;
  3646.    gap: 24px;
  3647.    margin: 0;
  3648.    padding: 6px;
  3649.    list-style: none;
  3650.    }
  3651.    .chiffres__grid > li{
  3652.    flex: 0 1 calc(33.333% - 16px); 
  3653.    }
  3654.    }
  3655.    @media (max-width: 991.98px){
  3656.    .chiffres__grid{
  3657.    display: flex;
  3658.    flex-wrap: wrap;
  3659.    justify-content: center;
  3660.    gap: 24px;
  3661.    margin: 0;
  3662.    padding: 6px;
  3663.    list-style: none;
  3664.    }
  3665.    .chiffres__grid > li{
  3666.    flex: 0 0 100%;
  3667.    }
  3668.    }
  3669. </style>
  3670. <script>
  3671.    (() => {
  3672.      const panel = document.querySelector('.chiffres__panel');
  3673.      if (!panel) return;
  3674.    
  3675.      const mql = window.matchMedia('(max-width: 991.98px)');
  3676.    
  3677.      let inited = false;
  3678.      let viewport, track, slides, prevBtn, nextBtn, dotsWrap;
  3679.     let index = 0;
  3680.    
  3681.      function cacheEls(){
  3682.        const mobileRoot = panel.querySelector('.only-mobile');
  3683.        if (!mobileRoot) return false;
  3684.        viewport = mobileRoot.querySelector('.chiffres__viewport');
  3685.        track    = mobileRoot.querySelector('.chiffres__track');
  3686.        slides   = [...mobileRoot.querySelectorAll('.chiffres__slide')];
  3687.        prevBtn  = mobileRoot.querySelector('.chiffres__arrow--prev');
  3688.        nextBtn  = mobileRoot.querySelector('.chiffres__arrow--next');
  3689.        dotsWrap = mobileRoot.querySelector('.chiffres__dots');
  3690.        return !!(viewport && track && slides.length && prevBtn && nextBtn && dotsWrap);
  3691.      }
  3692.    
  3693.      function buildDots(){
  3694.        dotsWrap.innerHTML = '';
  3695.        slides.forEach((_, i) => {
  3696.          const b = document.createElement('button');
  3697.          b.type = 'button';
  3698.          b.setAttribute('aria-label', `Aller à la diapo ${i+1}`);
  3699.          if (i === 0) b.setAttribute('aria-current', 'true');
  3700.          b.addEventListener('click', () => goTo(i));
  3701.          dotsWrap.appendChild(b);
  3702.        });
  3703.      }
  3704.    
  3705.      function positionArrows(){
  3706.        if (!viewport || !slides[index]) return;
  3707.        const card = slides[index].querySelector('.chiffre__media');
  3708.        if (!card) return;
  3709.    
  3710.        const vp = viewport.getBoundingClientRect();
  3711.        const cr = card.getBoundingClientRect();
  3712.    
  3713.        const prevR = (prevBtn.getBoundingClientRect().width || 44) / 2;
  3714.        const nextR = (nextBtn.getBoundingClientRect().width || 44) / 2;
  3715.        const SPACING = 12; // gap from card edge to arrow OUTER edge
  3716.    
  3717.        const desiredPrev = (cr.left  - vp.left) - (prevR + SPACING);
  3718.        const desiredNext = (cr.right - vp.left) + (nextR + SPACING);
  3719.    
  3720.        const minPrev = prevR + 6, maxPrev = vp.width - prevR - 6;
  3721.        const minNext = nextR + 6, maxNext = vp.width - nextR - 6;
  3722.    
  3723.        const clampedPrev = Math.max(minPrev, Math.min(desiredPrev, maxPrev));
  3724.        const clampedNext = Math.max(minNext, Math.min(desiredNext, maxNext));
  3725.    
  3726.        const shiftRight = clampedPrev - desiredPrev;
  3727.        const shiftLeft  = desiredNext - clampedNext;
  3728.        const symShift   = Math.max(shiftRight, shiftLeft);
  3729.    
  3730.        const prevCenter = desiredPrev + symShift;
  3731.        const nextCenter = desiredNext - symShift;
  3732.        const centerY    = cr.top - vp.top + cr.height / 2;
  3733.    
  3734.        prevBtn.style.left = prevCenter + 'px';
  3735.        nextBtn.style.left = nextCenter + 'px';
  3736.        prevBtn.style.top  = centerY + 'px';
  3737.        nextBtn.style.top  = centerY + 'px';
  3738.        prevBtn.style.visibility = nextBtn.style.visibility = 'visible';
  3739.      }
  3740.    
  3741.      function update(){
  3742.        track.style.transform = `translateX(${-index * 100}%)`;
  3743.        slides.forEach((li, i) => li.setAttribute('aria-selected', i === index ? 'true' : 'false'));
  3744.        [...dotsWrap.children].forEach((d, i) => i === index ? d.setAttribute('aria-current','true') : d.removeAttribute('aria-current'));
  3745.        prevBtn.disabled = (index === 0);
  3746.        nextBtn.disabled = (index === slides.length - 1);
  3747.        requestAnimationFrame(positionArrows);
  3748.      }
  3749.    
  3750.      function goTo(i){
  3751.        index = Math.max(0, Math.min(slides.length - 1, i));
  3752.        update();
  3753.      }
  3754.    
  3755.      function init(){
  3756.        if (inited || !cacheEls()) return;
  3757.    
  3758.        viewport.style.overflow = 'hidden';
  3759.        viewport.style.position = 'relative';
  3760.        track.style.display = 'flex';
  3761.        track.style.gap = '0';      // <-- guard you asked for
  3762.        track.style.transform = 'translateX(0)';
  3763.        track.style.transition = track.style.transition || '.45s ease';
  3764.        slides.forEach(s => {
  3765.          s.style.minWidth = '100%';
  3766.          s.style.flex = '0 0 100%';
  3767.          s.style.display = 'flex';
  3768.          s.style.justifyContent = 'center';
  3769.        });
  3770.    
  3771.        buildDots();
  3772.        prevBtn.addEventListener('click', onPrev);
  3773.        nextBtn.addEventListener('click', onNext);
  3774.        track.addEventListener('transitionend', positionArrows);
  3775.    
  3776.        viewport.tabIndex = 0;
  3777.        viewport.addEventListener('keydown', onKey);
  3778.    
  3779.        track.addEventListener('pointerdown', onPointerDown);
  3780.        track.addEventListener('pointerup', onPointerEnd);
  3781.        track.addEventListener('pointercancel', onPointerEnd);
  3782.        track.addEventListener('pointerleave', onPointerEnd);
  3783.    
  3784.        window.addEventListener('resize', positionArrows);
  3785.        slides.forEach(sl => {
  3786.          const img = sl.querySelector('img');
  3787.          if (img && !img.complete) img.addEventListener('load', positionArrows, { once:true });
  3788.        });
  3789.    
  3790.        index = 0;
  3791.        update();
  3792.        inited = true;
  3793.      }
  3794.    
  3795.      function destroy(){
  3796.        if (!inited) return;
  3797.        prevBtn.removeEventListener('click', onPrev);
  3798.        nextBtn.removeEventListener('click', onNext);
  3799.        track.removeEventListener('transitionend', positionArrows);
  3800.        viewport.removeEventListener('keydown', onKey);
  3801.        track.removeEventListener('pointerdown', onPointerDown);
  3802.        track.removeEventListener('pointerup', onPointerEnd);
  3803.        track.removeEventListener('pointercancel', onPointerEnd);
  3804.        track.removeEventListener('pointerleave', onPointerEnd);
  3805.        window.removeEventListener('resize', positionArrows);
  3806.        inited = false;
  3807.      }
  3808.    
  3809.      function onPrev(){ goTo(index - 1); }
  3810.      function onNext(){ goTo(index + 1); }
  3811.      function onKey(e){ if (e.key === 'ArrowRight') goTo(index + 1); if (e.key === 'ArrowLeft') goTo(index - 1); }
  3812.    
  3813.      let startX = null, pointerId = null;
  3814.      function onPointerDown(e){ startX = e.clientX; pointerId = e.pointerId; track.setPointerCapture(pointerId); }
  3815.      function onPointerEnd(e){
  3816.        if (startX === null) return;
  3817.        const dx = e.clientX - startX;
  3818.        const THRESH = 40;
  3819.        if (dx >  THRESH) goTo(index - 1);
  3820.        if (dx < -THRESH) goTo(index + 1);
  3821.        startX = null;
  3822.        if (pointerId != null) { try { track.releasePointerCapture(pointerId); } catch {} pointerId = null; }
  3823.      }
  3824.    
  3825.      function handleMQ(e){ e.matches ? init() : destroy(); }
  3826.      mql.addEventListener ? mql.addEventListener('change', handleMQ) : mql.addListener(handleMQ);
  3827.      handleMQ(mql);
  3828.    })();
  3829. </script>
  3830. <script>
  3831.    (function () {
  3832.      // --- Loader helper for the "Enregistrer" button ---
  3833.      function setLoading(btn, isLoading, text = 'Enregistrement…') {
  3834.        if (!btn) return;
  3835.        if (isLoading) {
  3836.          if (!btn.dataset._label) btn.dataset._label = btn.textContent;
  3837.          btn.disabled = true;
  3838.          btn.setAttribute('aria-busy', 'true');
  3839.          btn.innerHTML =
  3840.            '<svg width="16" height="16" viewBox="0 0 50 50" aria-hidden="true" focusable="false" style="vertical-align:-2px;margin-right:8px;">' +
  3841.              '<circle cx="25" cy="25" r="20" fill="none" stroke="currentColor" stroke-width="6" stroke-opacity="0.25"></circle>' +
  3842.              '<path d="M25 5 a20 20 0 0 1 0 40" stroke="currentColor" stroke-width="6" fill="none">' +
  3843.                '<animateTransform attributeName="transform" type="rotate" from="0 25 25" to="360 25 25" dur="0.8s" repeatCount="indefinite"></animateTransform>' +
  3844.              '</path>' +
  3845.            '</svg>' + text;
  3846.        } else {
  3847.          btn.disabled = false;
  3848.          btn.removeAttribute('aria-busy');
  3849.          btn.textContent = btn.dataset._label || 'Enregistrer';
  3850.        }
  3851.      }
  3852.    
  3853.      const UPDATE_URL = "{{ path('cms_text_update') }}";
  3854.      const UPLOAD_URL = "{{ path('cms_page_media_upload') }}";
  3855.      const ASSET_BASE = "{{ asset('/') }}";
  3856.      const $ = (sel, root=document) => root.querySelector(sel);
  3857.    
  3858.      let modal, closeEl, btnSave, btnCancel;
  3859.      let inTitle, inV1, inL1, inV2, inL2, inV3, inL3, inV4, inL4, inV5, inL5;
  3860.      let inImg1, inImg2, inImg3, inImg4, inImg5, file1, file2, file3, file4, file5;
  3861.    
  3862.      let ctx = null;
  3863.    
  3864.      function openEditor(root) {
  3865.        const els = {
  3866.          title: $('#chiffres-title', root),
  3867.          v1:    $('#chiffre1-value', root),  l1: $('#chiffre1-label', root),
  3868.          v2:    $('#chiffre2-value', root),  l2: $('#chiffre2-label', root),
  3869.          v3:    $('#chiffre3-value', root),  l3: $('#chiffre3-label', root),
  3870.          v4:    $('#chiffre4-value', root),  l4: $('#chiffre4-label', root),
  3871.          v5:    $('#chiffre5-value', root),  l5: $('#chiffre5-label', root),
  3872.          img1:  $('li:nth-child(1) img', root),
  3873.          img2:  $('li:nth-child(2) img', root),
  3874.          img3:  $('li:nth-child(3) img', root),
  3875.          img4:  $('li:nth-child(4) img', root),
  3876.          img5:  $('li:nth-child(5) img', root),
  3877.        };
  3878.        const keys = {
  3879.          title: root.dataset.titleKey || '',
  3880.          v1:    root.dataset.v1Key    || '', l1: root.dataset.l1Key || '',
  3881.          v2:    root.dataset.v2Key    || '', l2: root.dataset.l2Key || '',
  3882.          v3:    root.dataset.v3Key    || '', l3: root.dataset.l3Key || '',
  3883.          v4:    root.dataset.v4Key    || '', l4: root.dataset.l4Key || '',
  3884.          v5:    root.dataset.v5Key    || '', l5: root.dataset.l5Key || '',
  3885.          img1:  root.dataset.img1Key  || '',
  3886.          img2:  root.dataset.img2Key  || '',
  3887.          img3:  root.dataset.img3Key  || '',
  3888.          img4:  root.dataset.img4Key  || '',
  3889.          img5:  root.dataset.img5Key  || '',
  3890.        };
  3891.    
  3892.        ctx = { root, els, keys };
  3893.    
  3894.        inTitle.value = (els.title?.textContent || '').trim();
  3895.        inV1.value    = (els.v1?.textContent    || '').trim();
  3896.        inL1.value    = (els.l1?.textContent    || '').trim();
  3897.        inV2.value    = (els.v2?.textContent    || '').trim();
  3898.        inL2.value    = (els.l2?.textContent    || '').trim();
  3899.        inV3.value    = (els.v3?.textContent    || '').trim();
  3900.        inL3.value    = (els.l3?.textContent    || '').trim();
  3901.        inV4.value    = (els.v4?.textContent    || '').trim();
  3902.        inL4.value    = (els.l4?.textContent    || '').trim();
  3903.        inV5.value    = (els.v5?.textContent    || '').trim();
  3904.        inL5.value    = (els.l5?.textContent    || '').trim();
  3905.        inImg1.value  = els.img1?.getAttribute('src')?.replace(ASSET_BASE, '') || '';
  3906.        inImg2.value  = els.img2?.getAttribute('src')?.replace(ASSET_BASE, '') || '';
  3907.        inImg3.value  = els.img3?.getAttribute('src')?.replace(ASSET_BASE, '') || '';
  3908.        inImg4.value  = els.img4?.getAttribute('src')?.replace(ASSET_BASE, '') || '';
  3909.        inImg5.value  = els.img5?.getAttribute('src')?.replace(ASSET_BASE, '') || '';
  3910.    
  3911.        modal.hidden = false;
  3912.        inTitle.focus();
  3913.      }
  3914.    
  3915.      function closeModal() {
  3916.        modal.hidden = true;
  3917.        ctx = null;
  3918.        [file1, file2, file3, file4, file5].forEach(f => { if (f) f.value = ''; });
  3919.      }
  3920.    
  3921.      async function postText(key, text){
  3922.        const r = await fetch(UPDATE_URL, {
  3923.          method:'POST',
  3924.          headers:{'Content-Type':'application/json','Accept':'application/json'},
  3925.          body: JSON.stringify({ key, text })
  3926.        });
  3927.        const d = await r.json();
  3928.        if (!d.ok) throw new Error(d.error || 'Erreur texte');
  3929.        return d;
  3930.      }
  3931.    
  3932.     function buildPrefixedName(file, key) {
  3933.      const map = {
  3934.        'hero_slide1_bg': 'hero1-',
  3935.        'hero_slide2_bg': 'hero2-',
  3936.        'kpis_img1': 'c1-',
  3937.        'kpis_img2': 'c2-',
  3938.        'kpis_img3': 'c3-',
  3939.        'kpis_img4': 'c4-',
  3940.        'kpis_img5': 'c5-'
  3941.      };
  3942.      const prefix = map[key] || '';
  3943.      const ext = (file.name.split('.').pop() || '').toLowerCase();
  3944.      const base = file.name.replace(/\.[^.]+$/, '').toLowerCase().replace(/[^a-z0-9]+/g,'-').replace(/^-+|-+$/g,'') || 'image';
  3945.      const stamp = new Date().toISOString().replace(/[-:TZ.]/g,'').slice(0,14);
  3946.      const rand = Math.random().toString(36).slice(2,8);
  3947.      return `${prefix}${base}-${stamp}-${rand}.${ext}`;
  3948.    }
  3949.    
  3950.    async function uploadImage(key, file){
  3951.      const fd = new FormData();
  3952.      fd.append('key', key);
  3953.      fd.append('file', file, buildPrefixedName(file, key));
  3954.      const r = await fetch('{{ path("cms_page_media_upload") }}', { method:'POST', body: fd });
  3955.      const d = await r.json();
  3956.      if (!d.ok) throw new Error(d.error || 'Erreur upload');
  3957.      return d.path;
  3958.    }
  3959.    
  3960.    
  3961.      async function saveAll() {
  3962.        if (!ctx) return;
  3963.    
  3964.        const payloads = [];
  3965.        if (ctx.keys.title) payloads.push(postText(ctx.keys.title, inTitle.value.trim()));
  3966.        if (ctx.keys.v1)    payloads.push(postText(ctx.keys.v1,    inV1.value.trim()));
  3967.        if (ctx.keys.l1)    payloads.push(postText(ctx.keys.l1,    inL1.value.trim()));
  3968.        if (ctx.keys.v2)    payloads.push(postText(ctx.keys.v2,    inV2.value.trim()));
  3969.        if (ctx.keys.l2)    payloads.push(postText(ctx.keys.l2,    inL2.value.trim()));
  3970.        if (ctx.keys.v3)    payloads.push(postText(ctx.keys.v3,    inV3.value.trim()));
  3971.        if (ctx.keys.l3)    payloads.push(postText(ctx.keys.l3,    inL3.value.trim()));
  3972.        if (ctx.keys.v4)    payloads.push(postText(ctx.keys.v4,    inV4.value.trim()));
  3973.        if (ctx.keys.l4)    payloads.push(postText(ctx.keys.l4,    inL4.value.trim()));
  3974.        if (ctx.keys.v5)    payloads.push(postText(ctx.keys.v5,    inV5.value.trim()));
  3975.        if (ctx.keys.l5)    payloads.push(postText(ctx.keys.l5,    inL5.value.trim()));
  3977.        const imgUploads = {};
  3978.        if (file1?.files?.[0] && ctx.keys.img1) imgUploads.img1 = uploadImage(ctx.keys.img1, file1.files[0]);
  3979.        if (file2?.files?.[0] && ctx.keys.img2) imgUploads.img2 = uploadImage(ctx.keys.img2, file2.files[0]);
  3980.        if (file3?.files?.[0] && ctx.keys.img3) imgUploads.img3 = uploadImage(ctx.keys.img3, file3.files[0]);
  3981.        if (file4?.files?.[0] && ctx.keys.img4) imgUploads.img4 = uploadImage(ctx.keys.img4, file4.files[0]);
  3982.        if (file5?.files?.[0] && ctx.keys.img5) imgUploads.img5 = uploadImage(ctx.keys.img5, file5.files[0]);
  3983.    
  3984.        setLoading(btnSave, true);
  3985.        try {
  3986.          // Wait for texts and uploads (if any)
  3987.          await Promise.all([
  3988.            ...payloads,
  3989.            ...Object.values(imgUploads)
  3990.          ]);
  3991.    
  3992.          // Update DOM texts
  3993.          if (ctx.els.title) ctx.els.title.textContent = inTitle.value.trim();
  3994.          if (ctx.els.v1)    ctx.els.v1.textContent    = inV1.value.trim();
  3995.          if (ctx.els.l1)    ctx.els.l1.textContent    = inL1.value.trim();
  3996.          if (ctx.els.v2)    ctx.els.v2.textContent    = inV2.value.trim();
  3997.          if (ctx.els.l2)    ctx.els.l2.textContent    = inL2.value.trim();
  3998.          if (ctx.els.v3)    ctx.els.v3.textContent    = inV3.value.trim();
  3999.          if (ctx.els.l3)    ctx.els.l3.textContent    = inL3.value.trim();
  4000.          if (ctx.els.v4)    ctx.els.v4.textContent    = inV4.value.trim();
  4001.          if (ctx.els.l4)    ctx.els.l4.textContent    = inL4.value.trim();
  4002.          if (ctx.els.v5)    ctx.els.v5.textContent    = inV5.value.trim();
  4003.          if (ctx.els.l5)    ctx.els.l5.textContent    = inL5.value.trim();
  4004.    
  4005.          // Get upload results (promises already settled from the Promise.all above)
  4006.          const settled = await Promise.allSettled(Object.values(imgUploads));
  4007.          const keys = Object.keys(imgUploads);
  4008.          settled.forEach((s, i) => {
  4009.            if (s.status === 'fulfilled') {
  4010.              const rel = s.value;
  4011.              const abs = ASSET_BASE + rel;
  4012.              if (keys[i] === 'img1') { inImg1.value = rel; ctx.els.img1?.setAttribute('src', abs); }
  4013.              if (keys[i] === 'img2') { inImg2.value = rel; ctx.els.img2?.setAttribute('src', abs); }
  4014.              if (keys[i] === 'img3') { inImg3.value = rel; ctx.els.img3?.setAttribute('src', abs); }
  4015.              if (keys[i] === 'img4') { inImg4.value = rel; ctx.els.img4?.setAttribute('src', abs); }
  4016.              if (keys[i] === 'img5') { inImg5.value = rel; ctx.els.img5?.setAttribute('src', abs); }
  4017.            }
  4018.          });
  4019.    
  4020.          closeModal();
  4021.        } catch (err) {
  4022.          location.reload();
  4023.          //alert('Modification effectuée');
  4024.        } finally {
  4025.          setLoading(btnSave, false);
  4026.        }
  4027.      }
  4028.    
  4029.      document.addEventListener('DOMContentLoaded', () => {
  4030.        modal     = $('#kpis-editor');
  4031.        if (!modal) return;
  4032.    
  4033.        closeEl   = $('.cms-modal__close', modal);
  4034.        btnSave   = $('#kpe-save', modal);
  4035.        btnCancel = $('#kpe-cancel', modal);
  4036.    
  4037.        inTitle = $('#kpe-title', modal);
  4038.        inV1 = $('#kpe-v1', modal); inL1 = $('#kpe-l1', modal);
  4039.        inV2 = $('#kpe-v2', modal); inL2 = $('#kpe-l2', modal);
  4040.        inV3 = $('#kpe-v3', modal); inL3 = $('#kpe-l3', modal);
  4041.        inV4 = $('#kpe-v4', modal); inL4 = $('#kpe-l4', modal);
  4042.        inV5 = $('#kpe-v5', modal); inL5 = $('#kpe-l5', modal);
  4044.        inImg1 = $('#kpe-img1', modal); inImg2 = $('#kpe-img2', modal); inImg3 = $('#kpe-img3', modal); inImg4 = $('#kpe-img4', modal); inImg5 = $('#kpe-img5', modal);
  4045.        file1  = $('#kpe-file1', modal); file2  = $('#kpe-file2', modal); file3  = $('#kpe-file3', modal); file4  = $('#kpe-file4', modal); file5  = $('#kpe-file5', modal);
  4046.    
  4047.        document.addEventListener('click', (e) => {
  4048.          const btn = e.target.closest('.cms-kpis-edit');
  4049.          if (!btn) return;
  4050.          const root = btn.closest('.chiffres__panel');
  4051.          if (root) openEditor(root);
  4052.        });
  4053.    
  4054.        btnSave?.addEventListener('click', saveAll);
  4055.        btnCancel?.addEventListener('click', closeModal);
  4056.        closeEl?.addEventListener('click', closeModal);
  4057.    
  4058.        modal.addEventListener('click', (e) => { if (e.target === modal) closeModal(); });
  4059.        document.addEventListener('keydown', (e) => { if (!modal.hidden && e.key === 'Escape') closeModal(); });
  4060.      });
  4061.    })();
  4062.    
  4063.    
  4064. </script>
  4065. <div class="prefooter-gap" aria-hidden="true"></div>
  4066. <script>
  4067.    (function whenReady(fn){
  4068.      if (document.readyState === 'loading') {
  4069.        document.addEventListener('DOMContentLoaded', fn, { once: true });
  4070.      } else { fn(); }
  4071.    })(() => {
  4072.      const $ = s => document.querySelector(s);
  4073.    
  4074.      // --- Loader helper for the “Valider” button ---
  4075.      function setLoading(btn, isLoading, text = 'Validation…') {
  4076.        if (!btn) return;
  4077.        if (isLoading) {
  4078.          if (!btn.dataset._label) btn.dataset._label = btn.textContent;
  4079.          btn.disabled = true;
  4080.          btn.setAttribute('aria-busy', 'true');
  4081.          btn.innerHTML =
  4082.            '<svg width="16" height="16" viewBox="0 0 50 50" aria-hidden="true" focusable="false" style="vertical-align:-2px;margin-right:8px;">' +
  4083.              '<circle cx="25" cy="25" r="20" fill="none" stroke="currentColor" stroke-width="6" stroke-opacity="0.25"></circle>' +
  4084.              '<path d="M25 5 a20 20 0 0 1 0 40" stroke="currentColor" stroke-width="6" fill="none">' +
  4085.                '<animateTransform attributeName="transform" type="rotate" from="0 25 25" to="360 25 25" dur="0.8s" repeatCount="indefinite"></animateTransform>' +
  4086.              '</path>' +
  4087.            '</svg>' + text;
  4088.        } else {
  4089.          btn.disabled = false;
  4090.          btn.removeAttribute('aria-busy');
  4091.          btn.textContent = btn.dataset._label || 'Valider';
  4092.        }
  4093.      }
  4094.    
  4095.      const editBtn     = $('.catalogue-edit-btn');
  4096.      const modal       = $('#catalogue-edit-modal');
  4097.      const textarea    = $('#catalogue-edit-textarea');
  4098.      const cancelBtn   = $('#catalogue-cancel');
  4099.      const validateBtn = $('#catalogue-validate');
  4100.      const textEl      = $('#catalogue-text-left');
  4101.    
  4102.      if (!editBtn || !modal || !textarea || !cancelBtn || !validateBtn || !textEl) {
  4103.        console.warn('[catalogue] missing elements'); return;
  4104.      }
  4105.    
  4106.      const open  = () => { textarea.value = editBtn.dataset.currentText || textEl.textContent.trim(); modal.hidden = false; textarea.focus(); };
  4107.      const close = () => { modal.hidden = true; };
  4108.    
  4109.      editBtn.addEventListener('click', open);
  4110.      cancelBtn.addEventListener('click', close);
  4111.      modal.addEventListener('click', e => { if (e.target === modal) close(); });
  4112.    
  4113.      validateBtn.addEventListener('click', async () => {
  4114.        const url = editBtn.dataset.url;
  4115.        const newText = textarea.value.trim();
  4116.        if (!newText) { alert('Le texte ne peut pas être vide.'); return; }
  4117.    
  4118.        setLoading(validateBtn, true, 'Validation…');
  4119.    
  4120.        try {
  4121.          const res = await fetch(url, {
  4122.            method: 'POST',
  4123.            headers: {
  4124.              'Content-Type': 'application/json',
  4125.              'Accept': 'application/json'
  4126.            },
  4127.            credentials: 'same-origin',
  4128.            body: JSON.stringify({ text: newText })
  4129.          });
  4130.    
  4131.          const ct  = res.headers.get('content-type') || '';
  4132.          const raw = await res.clone().text();
  4133.          console.debug('[catalogue_text_update]', res.status, ct, raw);
  4134.    
  4135.          if (!res.ok) {
  4136.            alert('Échec (HTTP ' + res.status + '). Voir la console pour les détails.');
  4137.            return;
  4138.          }
  4139.          if (!/application\/json/i.test(ct)) {
  4140.            console.error('Non-JSON response:', raw);
  4141.            alert('Réponse inattendue du serveur (non-JSON).');
  4142.            return;
  4143.          }
  4144.    
  4145.          const data = JSON.parse(raw);
  4146.          if (data && data.ok) {
  4147.            textEl.textContent = data.text;
  4148.            editBtn.dataset.currentText = data.text;
  4149.            close();
  4150.          } else {
  4151.            alert(data?.error || 'Échec de la mise à jour.');
  4152.          }
  4153.        } catch (err) {
  4154.          console.error(err);
  4155.          alert('La mise à jour a échoué. Merci de réessayer.');
  4156.        } finally {
  4157.          setLoading(validateBtn, false);
  4158.        }
  4159.      });
  4160.    });
  4161.    
  4162. </script>
  4163. <style>
  4164.    .hero-slide .container.hero-content{ 
  4165.    position: relative !important; 
  4166.    z-index: 1 !important; 
  4167.    height: 100% !important;
  4168.    display: flex !important; 
  4169.    align-items: center !important; 
  4170.    justify-content: flex-start !important;
  4171.    max-width: 1180px !important;
  4172.    margin: 0 auto !important;
  4173.    padding: 0 12px !important;
  4174.    }
  4175.    .hero-slide .hero-text-content {
  4176.    width: 100% !important;
  4177.    text-align: left !important;
  4178.    display: flex !important;
  4179.    flex-direction: column !important;
  4180.    align-items: flex-start !important;
  4181.    }
  4182.    .hero-slide .hero-kicker {
  4183.    text-align: left !important;
  4184.    margin-bottom: 6px !important;
  4185.    width: 100% !important;
  4186.    }
  4187.    .hero-slide .hero-title {
  4188.    text-align: left !important;
  4189.    margin: 10px 0 18px 0 !important;
  4190.    width: 100% !important;
  4191.    }
  4192.    .hero-slide .hero-ctas {
  4193.    text-align: left !important;
  4194.    margin-top: 18px !important;
  4195.    justify-content: flex-start !important;
  4196.    width: 100% !important;
  4197.    }
  4198.    /* Style spécifique pour le titre "Nos prestations" */
  4199.    .sec-title--orange {
  4200.    color: #F14816 !important;
  4201.    }
  4202.    .hero-overlay{background:rgba(7,51,73,.55)}
  4203.    .home-event-ribbon{box-shadow:0 3px 8px rgba(0,0,0,.15)}
  4204.    .hero-ribbon-shell{position:absolute;top:calc(var(--topbar-h, 0px) + var(--nav-offset, 0px) + var(--pill-h, 0px) + 12px);left:0;right:0;z-index:4;display:flex;justify-content:center;padding:0 12px}
  4205.    .hero-ribbon-shell .home-event-ribbon{margin:0;width:min(1180px,calc(100% - 24px));max-width:none}
  4206.    .hero-content{position:relative;z-index:2;display:flex;align-items:center;justify-content:flex-start;height:100%;padding-top:max(calc(var(--topbar-h, 0px) + var(--nav-offset, 0px) + var(--pill-h, 0px) + var(--ribbon-h, 44px) + var(--gap, 40px)), 150px) !important}
  4207.    .hero-copy{display:flex;flex-direction:column;align-items:flex-start;text-align:left;padding-top:clamp(12px,2vh,24px)}
  4208.    .hero-title{font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;font-weight:800;line-height:1.05;letter-spacing:.002em;font-size:clamp(28px,3.6vw,46px);color:#F14816;margin:10px 0 12px 0;max-width:26ch;white-space:normal;text-wrap:balance}
  4209.    .hero-sub{max-width:700px;font-size:clamp(13px,1.2vw,16px);line-height:1.65;color:rgba(255,255,255,.92)}
  4210.    .hero-ctas{margin-top:14px}
  4211.    .hero-ctas .btn-primary{background:#F14816;color:#fff;box-shadow:0 6px 16px rgba(241,72,22,.25)}
  4212.    .hero-dots{position:absolute;left:50%;bottom:24px;transform:translateX(-50%);z-index:4;display:flex;gap:8px}
  4213.    .hero-dots button{width:7px;height:7px;border-radius:9999px;border:0;background:#fff;opacity:.55}
  4214.    .hero-dots button[aria-selected="true"]{background:#F14816;opacity:1;width:9px;height:9px}
  4215.    .hero-nav{background:rgba(141,156,165,.85);border:1px solid rgba(217,217,217,.30);box-shadow:0 2px 8px rgba(0,0,0,.20)}
  4216.    :root{--hero-left:76px;}
  4217.    .hero .container.hero-content{
  4218.    max-width:100% !important;
  4219.    margin:0 !important;
  4220.    padding-left:var(--hero-left) !important;
  4221.    padding-right:0 !important;
  4222.    justify-content:flex-start !important;
  4223.    }
  4224.    .hero .hero-copy{
  4225.    width:100% !important;
  4226.    text-align:left !important;
  4227.    align-items:flex-start !important;
  4228.    }
  4229. </style>
  4230. <script>
  4231.    (function () {
  4232.      const track = document.querySelector('.hero-track');
  4233.      if (!track) return;
  4234.    
  4235.      const allSlides = Array.from(track.querySelectorAll('article[data-scope]'));
  4236.    
  4237.      let slides = allSlides.filter(el =>
  4238.        el.classList.contains('hero-slide') &&
  4239.        !el.classList.contains('hero-slide-config')
  4240.      );
  4241.      if (!slides.length) {
  4242.        slides = allSlides.filter(el => el.classList.contains('hero-slide'));
  4243.      }
  4244.      if (!slides.length) return;
  4245.    
  4246.      const btnPrev  = document.querySelector('.hero-nav.prev');
  4247.      const btnNext  = document.querySelector('.hero-nav.next');
  4248.      const dotsWrap = document.querySelector('.hero-dots');
  4249.    
  4250.      let dots = [];
  4251.      if (dotsWrap) {
  4252.        dotsWrap.innerHTML = '';
  4253.        slides.forEach((_, i) => {
  4254.          const dot = document.createElement('button');
  4255.          dot.type = 'button';
  4256.          dot.setAttribute('role', 'tab');
  4257.          dot.setAttribute('aria-label', 'Aller à la diapo ' + (i + 1));
  4258.          dot.addEventListener('click', () => goTo(i, true));
  4259.          dotsWrap.appendChild(dot);
  4260.          dots.push(dot);
  4261.        });
  4262.      }
  4263.    
  4264.      let index = 0;
  4265.      let timer = null;
  4266.      const AUTOPLAY_DELAY = 6000;
  4268.      function applyRibbonVisibility(slide) {
  4269.        if (!slide) return;
  4270.        const shell = slide.querySelector('.hero-ribbon-shell');
  4271.        const rEl = slide.querySelector('.home-event-text');
  4272.        if (!shell || !rEl) return;
  4274.        const txt = (rEl.textContent || '').trim();
  4275.        shell.style.display = (txt && txt !== '-') ? '' : 'none';
  4276.      }
  4278.      function update() {
  4279.       slides.forEach((slide, i) => {
  4280.         const active = i === index;
  4281.         slide.classList.toggle('is-active', active);
  4282.         slide.setAttribute('aria-hidden', active ? 'false' : 'true');
  4283.         slide.style.display = active ? 'block' : 'none';
  4284.         applyRibbonVisibility(slide);
  4285.       });
  4286.    
  4287.        if (dots.length) {
  4288.          dots.forEach((dot, i) => {
  4289.            dot.setAttribute('aria-selected', i === index ? 'true' : 'false');
  4290.          });
  4291.        }
  4292.      }
  4293.    
  4294.      function goTo(newIndex, fromUser) {
  4295.        const max = slides.length;
  4296.        index = ((newIndex % max) + max) % max;
  4297.        update();
  4298.        if (fromUser) restartAutoplay();
  4299.      }
  4300.    
  4301.      function next(fromUser) {
  4302.        goTo(index + 1, fromUser);
  4303.      }
  4304.    
  4305.      function prev(fromUser) {
  4306.        goTo(index - 1, fromUser);
  4307.      }
  4308.    
  4309.      function startAutoplay() {
  4310.        if (timer || slides.length < 2) return;
  4311.        timer = setInterval(() => next(false), AUTOPLAY_DELAY);
  4312.      }
  4313.    
  4314.      function stopAutoplay() {
  4315.        if (!timer) return;
  4316.        clearInterval(timer);
  4317.        timer = null;
  4318.      }
  4319.    
  4320.      function restartAutoplay() {
  4321.        stopAutoplay();
  4322.        startAutoplay();
  4323.      }
  4324.    
  4325.      if (btnPrev) btnPrev.addEventListener('click', () => prev(true));
  4326.      if (btnNext) btnNext.addEventListener('click', () => next(true));
  4327.    
  4328.      const hero = document.querySelector('.hero');
  4329.      if (hero) {
  4330.        hero.addEventListener('mouseenter', stopAutoplay);
  4331.        hero.addEventListener('mouseleave', startAutoplay);
  4332.        hero.addEventListener('focusin', stopAutoplay);
  4333.        hero.addEventListener('focusout', startAutoplay);
  4334.      }
  4335.      
  4336.    /******************************************************************/
  4340.  (function bindSwipe() {
  4341.     const mql = window.matchMedia('(max-width: 767.98px)');
  4343.     let startX = 0, startY = 0, startT = 0;
  4344.     let pointerId = null;
  4345.     let tracking = false;
  4347.     const THRESH_X = 45;    
  4348.     const THRESH_Y = 80;    
  4349.     const MAX_TIME = 600;    
  4350.     let blockClickUntil = 0;
  4352.     hero.addEventListener('click', (e) => {
  4353.       if (Date.now() < blockClickUntil) {
  4354.         e.preventDefault();
  4355.         e.stopPropagation();
  4356.       }
  4357.     }, true);
  4359.     function shouldIgnoreTarget(e) {
  4360.       return !!e.target.closest('a,button,input,textarea,select,label');
  4361.     }
  4363.     function onDown(e) {
  4364.       if (!mql.matches) return;
  4365.       if (e.pointerType === 'mouse') return; 
  4366.       if (shouldIgnoreTarget(e)) return;
  4368.       tracking = true;
  4369.       pointerId = e.pointerId;
  4370.       startX = e.clientX;
  4371.       startY = e.clientY;
  4372.       startT = performance.now();
  4374.       stopAutoplay();
  4376.       try { hero.setPointerCapture(pointerId); } catch {}
  4377.     }
  4379.     function onUp(e) {
  4380.       if (!tracking) return;
  4381.       tracking = false;
  4383.       const dx = e.clientX - startX;
  4384.       const dy = e.clientY - startY;
  4385.       const dt = performance.now() - startT;
  4387.       try { hero.releasePointerCapture(pointerId); } catch {}
  4388.       pointerId = null;
  4390.       if (Math.abs(dx) >= THRESH_X && Math.abs(dy) <= THRESH_Y && dt <= MAX_TIME) {
  4391.         if (dx < 0) next(true);  
  4392.         else prev(true);        
  4394.         blockClickUntil = Date.now() + 400;
  4395.       }
  4397.       startAutoplay();
  4398.     }
  4400.     hero.addEventListener('pointerdown', onDown, { passive: true });
  4401.     hero.addEventListener('pointerup', onUp, { passive: true });
  4402.     hero.addEventListener('pointercancel', onUp, { passive: true });
  4403.   })();
  4409.    /*******************************************************************/
  4410.      update();
  4411.      startAutoplay();
  4412.    })();
  4413. </script>
  4415. <style>
  4419. .hero,
  4420. .hero-track{
  4421.   touch-action: pan-y;         
  4422.   -webkit-user-select: none;
  4423.   user-select: none;
  4424. }
  4426. </style>
  4427. {% endblock %}