templates/index.html.twig line 1

  1. {% extends 'base.html.twig' %}
  3. {% block title %}DAIP - Direction de l'Apprentissage et de l'Insertion Professionnelle{% endblock %}
  5. {% block meta %}
  6. {{ parent() }}
  7. <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0, user-scalable=yes">
  8. <meta name="keywords" content="daip, recrutement, 4000 jeunes, formation professionnelle, apprentissage, cqp">
  9. <meta name="description" content="Recrutement de 4000 jeunes pour la formation au Certificat de Qualification Professionnelle (CQP). Inscriptions du 16 au 28 février 2026.">
  10. {% endblock %}
  12. {% block body %}
  14. <!-- ==================== HERO SECTION ==================== -->
  15. <section class="hero relative min-h-[600px] flex items-center justify-center bg-gradient-to-br from-indigo-700 via-purple-700 to-blue-700">
  16.     
  17.     <!-- Éléments décoratifs - FIXED: contain overflow -->
  18.     <div class="absolute inset-0 overflow-hidden pointer-events-none">
  19.         <div class="absolute top-0 left-0 w-64 h-64 bg-indigo-50 rounded-full filter blur-3xl opacity-5 animate-pulse-glow"></div>
  20.         <div class="absolute bottom-0 right-0 w-64 h-64 bg-purple-50 rounded-full filter blur-3xl opacity-5 animate-pulse-glow animation-delay-2000"></div>
  21.         
  22.         <!-- Animations de fond - FIXED: contained within inset-0 -->
  23.         <div class="absolute -top-40 -right-40 w-80 h-80 bg-purple-400 rounded-full mix-blend-multiply filter blur-3xl opacity-20 animate-blob"></div>
  24.         <div class="absolute -bottom-40 -left-40 w-80 h-80 bg-indigo-400 rounded-full mix-blend-multiply filter blur-3xl opacity-20 animate-blob animation-delay-2000"></div>
  25.         <div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-80 h-80 bg-pink-400 rounded-full mix-blend-multiply filter blur-3xl opacity-20 animate-blob animation-delay-4000"></div>
  26.     </div>
  27.     
  28.     <div class="container mx-auto px-4 relative z-10 w-full max-w-full">
  29.         <div class="max-w-4xl mx-auto text-center">
  30.             <!-- Badge -->
  31.             <div class="inline-flex items-center rounded-full border px-4 py-1.5 text-sm font-semibold bg-white text-purple-400 border-white mb-6 animate-fade-up animation-delay-200">
  32.                 <span class="flex h-2 w-2 rounded-full bg-green-400 mr-2 animate-pulse"></span>
  33.                 RECRUTEMENT
  34.             </div>
  35.             
  36.             <!-- Titre - FIXED: text size for mobile -->
  37.             <h1 class="text-3xl sm:text-4xl md:text-6xl lg:text-7xl font-bold text-white mb-6 leading-tight animate-fade-up animation-delay-400 break-words">
  38.                 recrutement 4000 
  39.                 <span class="bg-gradient-to-r from-indigo-200 via-purple-200 to-pink-200 bg-clip-text text-transparent">
  40.                     jeunes pour formation au CQP
  41.                 </span>
  42.             </h1>
  43.             
  44.             <!-- Description -->
  45.             <p class="text-base sm:text-lg md:text-xl text-white/80 mb-8 max-w-2xl mx-auto px-2 animate-fade-up animation-delay-600">
  46.                 Rejoignez les 4000 jeunes qui seront formés aux métiers d'avenir dans 10 secteurs d'activité
  47.             </p>
  48.             
  49.             <!-- Stats rapides - FIXED: better mobile grid -->
  50.             <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-5 gap-2 sm:gap-4 max-w-4xl mx-auto mb-10">
  51.                 <div class="bg-white/5 backdrop-blur-sm rounded-xl p-2 sm:p-4 border border-white/10 animate-fade-up animation-delay-800">
  52.                     <div class="text-lg sm:text-2xl font-bold text-white">{{ stats.metiers }}</div>
  53.                     <div class="text-[10px] sm:text-xs text-white/60">Métiers</div>
  54.                 </div>
  55.                 <div class="bg-white/5 backdrop-blur-sm rounded-xl p-2 sm:p-4 border border-white/10 animate-fade-up animation-delay-1000">
  56.                     <div class="text-lg sm:text-2xl font-bold text-white">{{ stats.secteurs }}</div>
  57.                     <div class="text-[10px] sm:text-xs text-white/60">Secteurs</div>
  58.                 </div>
  59.                 <div class="bg-white/5 backdrop-blur-sm rounded-xl p-2 sm:p-4 border border-white/10 animate-fade-up animation-delay-1200">
  60.                     <div class="text-lg sm:text-2xl font-bold text-white">{{ stats.etablissements }}</div>
  61.                     <div class="text-[10px] sm:text-xs text-white/60">etablissements</div>
  62.                 </div>
  63.                 <div class="bg-white/5 backdrop-blur-sm rounded-xl p-2 sm:p-4 border border-white/10 animate-fade-up animation-delay-1400">
  64.                     <div class="text-lg sm:text-2xl font-bold text-white">{{ stats.places }}</div>
  65.                     <div class="text-[10px] sm:text-xs text-white/60">Places</div>
  66.                 </div>
  67.                 <div class="bg-white/5 backdrop-blur-sm rounded-xl p-2 sm:p-4 border border-white/10 animate-fade-up animation-delay-1600 col-span-2 sm:col-span-1">
  68.                     <div class="text-lg sm:text-2xl font-bold text-white">{{ stats.candidatures }}</div>
  69.                     <div class="text-[10px] sm:text-xs text-white/60">Candidatures</div>
  70.                 </div>
  71.             </div>
  72.         </div>
  73.     </div>
  75.     <!-- Scroll indicator -->
  76.     <a href="#presentation" class="absolute bottom-8 left-1/2 transform -translate-x-1/2 animate-bounce">
  77.         <div class="w-6 h-10 rounded-full border-2 border-white/30 flex justify-center">
  78.             <div class="w-1 h-3 bg-white/60 rounded-full mt-2 animate-pulse"></div>
  79.         </div>
  80.     </a>
  81. </section>
  83. <!-- ==================== PRÉSENTATION SECTION ==================== -->
  84. <section id="presentation" class="relative py-12 sm:py-20 bg-white w-full overflow-hidden">
  85.     <!-- Conteneur de graffitis animés -->
  86.     <div id="graffiti-container" class="absolute inset-0 overflow-hidden pointer-events-none"></div>
  87.     
  88.     <div class="container mx-auto px-4 relative z-10 w-full max-w-full">
  89.         <div class="grid lg:grid-cols-5 gap-8 lg:gap-12 items-start">
  90.             <!-- Colonne gauche : Texte (3/5) -->
  91.             <div class="lg:col-span-3 space-y-4 text-slate-700 leading-relaxed">
  92.                 <p class="text-base sm:text-lg md:text-xl text-slate-800 font-light leading-relaxed">
  93.                     Il est ouvert, au titre de l'année 2026, un recrutement de 
  94.                     <span class="relative inline-block px-2">
  95.                         <span class="absolute inset-0 bg-indigo-100 rounded-lg -rotate-1"></span>
  96.                         <strong class="relative text-indigo-700 font-bold">quatre mille (4 000) jeunes</strong>
  97.                     </span>
  98.                     pour la formation au Certificat de Qualification Professionnelle (CQP) dans divers métiers. 
  99.                     Les candidatures sont reçues en ligne sur le site 
  100.                     <a href="https://1jeune1metier.daip.ci/" class="text-indigo-600 font-medium hover:text-indigo-700 underline underline-offset-2 transition break-all" target="_blank">1jeune1metier.daip.ci</a> 
  101.                     ou de façon physique dans les différentes structures de formation.
  102.                 </p>
  103.                 
  104.                 <p class="text-base sm:text-lg md:text-xl text-slate-800 font-light">
  105.                     Pour faire acte de candidature vous devez remplir les conditions suivantes :
  106.                 </p>
  107.                 <div class="space-y-3">
  108.                     <!-- Puce 1 : Niveau scolaire -->
  109.                     <div class="flex items-start gap-3 sm:gap-4 group">
  110.                         <div class="relative flex-shrink-0">
  111.                             <div class="w-8 h-8 sm:w-10 sm:h-10 bg-indigo-100 rounded-xl flex items-center justify-center group-hover:scale-110 transition-transform shadow-md group-hover:shadow-indigo-200">
  112.                                 <i class="fas fa-graduation-cap text-indigo-600 text-sm sm:text-lg"></i>
  113.                             </div>
  114.                         </div>
  115.                         <div class="flex-1 pt-1">
  116.                             <p class="text-sm sm:text-base text-slate-700">
  117.                                 <span class="font-semibold text-indigo-700">Niveau scolaire requis :</span>
  118.                                 <span class="block text-slate-600 mt-1">Avoir au moins le niveau de la classe de 5ème ou 3ème (selon le secteur d'activité)</span>
  119.                             </p>
  120.                         </div>
  121.                     </div>
  122.                     
  123.                     <!-- Puce 2 : Âge -->
  124.                     <div class="flex items-start gap-3 sm:gap-4 group">
  125.                         <div class="relative flex-shrink-0">
  126.                             <div class="w-8 h-8 sm:w-10 sm:h-10 bg-purple-100 rounded-xl flex items-center justify-center group-hover:scale-110 transition-transform shadow-md group-hover:shadow-purple-200">
  127.                                 <i class="fas fa-birthday-cake text-purple-600 text-sm sm:text-lg"></i>
  128.                             </div>
  129.                         </div>
  130.                         <div class="flex-1 pt-1">
  131.                             <p class="text-sm sm:text-base text-slate-700">
  132.                                 <span class="font-semibold text-purple-700">Tranche d'âge :</span>
  133.                                 <span class="block text-slate-600 mt-1">Être âgé de 16 à 40 ans au 31 décembre 2025</span>
  134.                             </p>
  135.                         </div>
  136.                     </div>
  137.                     
  138.                     <!-- Puce 3 : Nationalité -->
  139.                     <div class="flex items-start gap-3 sm:gap-4 group">
  140.                         <div class="relative flex-shrink-0">
  141.                             <div class="w-8 h-8 sm:w-10 sm:h-10 bg-pink-100 rounded-xl flex items-center justify-center group-hover:scale-110 transition-transform shadow-md group-hover:shadow-pink-200">
  142.                                 <i class="fas fa-flag text-pink-600 text-sm sm:text-lg"></i>
  143.                             </div>
  144.                         </div>
  145.                         <div class="flex-1 pt-1">
  146.                             <p class="text-sm sm:text-base text-slate-700">
  147.                                 <span class="font-semibold text-pink-700">Nationalité :</span>
  148.                                 <span class="block text-slate-600 mt-1">Être de nationalité ivoirienne</span>
  149.                             </p>
  150.                         </div>
  151.                     </div>
  152.                 </div>
  153.             </div>
  154.             
  155.             <!-- Colonne droite : Illustration (2/5) - FIXED: hide on very small screens if needed -->
  156.             <div class="lg:col-span-2 relative hidden sm:block">
  157.                 <!-- Illustration principale -->
  158.                 <div class="relative rounded-2xl overflow-hidden shadow-2xl">
  159.                     <img src="{{ asset('svg/candidate.svg') }}" alt="Illustration formation professionnelle" class="w-full h-auto object-cover" onerror="this.onerror=null; this.src='{{ asset('/svg/candidate.svg') }}'">
  160.                     
  161.                     <!-- Overlay léger -->
  162.                     <div class="absolute inset-0 bg-gradient-to-tr from-indigo-600/10 to-purple-600/10 mix-blend-overlay"></div>
  163.                 </div>
  164.                 
  165.                 <!-- Éléments décoratifs flottants -->
  166.                 <div class="absolute -top-6 -right-6 w-20 h-20 bg-indigo-200 rounded-full opacity-20 animate-pulse-glow"></div>
  167.                 <div class="absolute -bottom-6 -left-6 w-28 h-28 bg-purple-200 rounded-full opacity-20 animate-pulse-glow animation-delay-2000"></div>
  168.                 
  169.                 <!-- Badge flottant avec statistique -->
  170.                 <div class="absolute -bottom-4 -right-4 bg-white rounded-xl shadow-lg p-3 animate-float">
  171.                     <div class="flex items-center gap-2">
  172.                         <div class="w-10 h-10 bg-indigo-100 rounded-full flex items-center justify-center">
  173.                             <i class="fas fa-graduation-cap text-indigo-600 text-lg"></i>
  174.                         </div>
  175.                         <div>
  176.                             <p class="text-xl font-bold text-indigo-600">4000+</p>
  177.                             <p class="text-xs text-slate-500">jeunes formés</p>
  178.                         </div>
  179.                     </div>
  180.                 </div>
  181.             </div>
  182.         </div>
  183.     </div>
  184. </section>
  186. <!-- ==================== PROCESSUS SECTION ==================== -->
  187. <section class="py-12 sm:py-20 bg-gradient-to-br from-indigo-50 to-purple-50 border-y border-indigo-200">
  188.     <div class="container mx-auto px-4 w-full max-w-full">
  189.         <div class="text-center mb-8 sm:mb-12">
  190.             <div class="inline-flex items-center rounded-full border border-indigo-200 bg-white px-3 sm:px-4 py-1.5 text-xs sm:text-sm font-semibold text-indigo-600 mb-4 shadow-sm">
  191.                 <i class="fas fa-clock mr-2"></i>
  192.                 PROCESSUS DE SÉLECTION
  193.             </div>
  194.             <h2 class="text-2xl sm:text-3xl md:text-4xl font-bold text-slate-900 mb-4 px-2">
  195.                 3 étapes pour réussir
  196.             </h2>
  197.             <p class="text-sm sm:text-base md:text-lg text-slate-600 max-w-2xl mx-auto px-4">
  198.                 Un processus simple et transparent en trois étapes
  199.             </p>
  200.         </div>
  202.         <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4 sm:gap-6 md:gap-8 mx-auto">
  203.             <!-- Étape 1 -->
  204.             <div class="relative bg-white rounded-2xl p-6 sm:p-8 shadow-lg border border-indigo-200 hover:shadow-xl transition-all hover:-translate-y-2 group">
  205.                 <div class="w-12 h-12 sm:w-16 sm:h-16 bg-indigo-100 rounded-xl flex items-center justify-center mb-4 sm:mb-6 group-hover:scale-110 transition">
  206.                     <i class="fas fa-file-alt text-xl sm:text-2xl text-indigo-600"></i>
  207.                 </div>
  208.                 <h3 class="text-lg sm:text-xl font-bold mb-2 sm:mb-3 text-slate-900">Analyse des dossiers</h3>
  209.                 <p class="text-sm sm:text-base text-slate-600">Vérification de la conformité des pièces fournies et des critères d'éligibilité</p>
  210.             </div>
  211.             
  212.             <!-- Étape 2 -->
  213.             <div class="relative bg-white rounded-2xl p-6 sm:p-8 shadow-lg border border-purple-200 hover:shadow-xl transition-all hover:-translate-y-2 group">
  214.                 <div class="w-12 h-12 sm:w-16 sm:h-16 bg-purple-100 rounded-xl flex items-center justify-center mb-4 sm:mb-6 group-hover:scale-110 transition">
  215.                     <i class="fas fa-users text-xl sm:text-2xl text-purple-600"></i>
  216.                 </div>
  217.                 <h3 class="text-lg sm:text-xl font-bold mb-2 sm:mb-3 text-slate-900">Entretien de motivation</h3>
  218.                 <p class="text-sm sm:text-base text-slate-600">Épreuves écrites et orales pour évaluer la motivation et les aptitudes</p>
  219.             </div>
  220.             
  221.             <!-- Étape 3 -->
  222.             <div class="relative bg-white rounded-2xl p-6 sm:p-8 shadow-lg border border-pink-200 hover:shadow-xl transition-all hover:-translate-y-2 group sm:col-span-2 md:col-span-1">
  223.                 <div class="w-12 h-12 sm:w-16 sm:h-16 bg-pink-100 rounded-xl flex items-center justify-center mb-4 sm:mb-6 group-hover:scale-110 transition">
  224.                     <i class="fas fa-heartbeat text-xl sm:text-2xl text-pink-600"></i>
  225.                 </div>
  226.                 <h3 class="text-lg sm:text-xl font-bold mb-2 sm:mb-3 text-slate-900">Visite médicale</h3>
  227.                 <p class="text-sm sm:text-base text-slate-600">Examen d'aptitude physique obligatoire</p>
  228.             </div>
  229.         </div>
  230.     </div>
  231. </section>
  233. <!-- ==================== SECTION ÉTABLISSEMENTS ==================== -->
  234. <section id="etablissements" class="py-12 sm:py-20 bg-gradient-to-br from-indigo-700 via-purple-700 to-blue-700">
  235.     <div class="container mx-auto px-4 w-full max-w-full">
  236.         <div class="text-center mb-8 sm:mb-12">
  237.             <div class="inline-flex items-center rounded-full border border-white bg-white px-3 sm:px-4 py-1.5 text-xs sm:text-sm font-semibold text-purple-500 mb-4 shadow-lg">
  238.                 <i class="fas fa-briefcase mr-2"></i>
  239.                 ÉTABLISSEMENTS DE FORMATION
  240.             </div>
  241.             <h2 class="text-2xl sm:text-3xl md:text-4xl font-bold text-white mb-4 px-2">
  242.                 {{ stats.etablissements }} établissements à découvrir
  243.             </h2>
  244.             <p class="text-sm sm:text-base md:text-lg text-white/80 max-w-2xl mx-auto px-4">
  245.                 Trouvez votre établissement par direction régionale
  246.             </p>
  247.         </div>
  249.         <!-- Filtres - FIXED: mobile layout -->
  250.         <div class="max-w-4xl mx-auto mb-8 sm:mb-10 px-2">
  251.             <div class="flex flex-col sm:flex-row gap-3 sm:gap-4">
  252.                 <div class="flex-1">
  253.                     <div class="relative">
  254.                         <i class="fas fa-search absolute left-3 top-1/2 transform -translate-y-1/2 text-slate-400"></i>
  255.                         <input type="text" 
  256.                                id="etablissement-search" 
  257.                                placeholder="Rechercher un établissement..." 
  258.                                class="w-full pl-10 pr-4 py-2 sm:py-3 rounded-lg border border-white/30 bg-white/10 backdrop-blur-sm text-white placeholder-white/70 text-sm sm:text-base focus:outline-none focus:ring-2 focus:ring-white focus:border-transparent"
  259.                                value="{{ rechercheEtablissement|default('') }}">
  260.                     </div>
  261.                 </div>
  262.                 <div class="sm:w-64">
  263.                     <select id="dr-filter" class="w-full px-4 py-2 sm:py-3 rounded-lg border border-white/30 bg-white/10 backdrop-blur-sm text-white text-sm sm:text-base focus:outline-none focus:ring-2 focus:ring-white focus:border-transparent">
  264.                         <option value="">Toutes les directions</option>
  265.                         {% for direction in directions|default([]) %}
  266.                             <option value="{{ direction.id }}" {{ directionSelectionnee|default('') == direction.id ? 'selected' : '' }}>
  267.                                 {{ direction.nom }}
  268.                             </option>
  269.                         {% endfor %}
  270.                     </select>
  271.                 </div>
  272.             </div>
  273.         </div>
  275.         <!-- Grille des établissements - FIXED: responsive grid -->
  276.         <div id="etablissements-grid" class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 sm:gap-6">
  277.             {% include 'partials/_etablissements_cards.html.twig' with {
  278.                 'etablissements': etablissements
  279.             } %}
  280.         </div>
  282.         <!-- Loading indicator -->
  283.         <div id="etablissements-loading" class="hidden text-center py-8">
  284.             <div class="inline-block w-8 h-8 border-4 border-white/30 border-t-white rounded-full animate-spin"></div>
  285.             <p class="text-white/70 mt-2">Chargement en cours...</p>
  286.         </div>
  287.         
  288.         <!-- Pagination -->
  289.         <div id="etablissements-pagination" class="flex justify-center mt-8 sm:mt-10"></div>
  290.         
  291.         <div class="text-center mt-6">
  292.             <a href="{{ path('app_etablissements_list') }}"
  293.             class="inline-flex items-center gap-2 px-6 py-3 bg-white text-indigo-600 rounded-xl font-semibold hover:bg-indigo-50 transition border border-white/30">
  294.                 <i class="fas fa-building"></i>
  295.                 Voir tous les établissements
  296.                 <i class="fas fa-arrow-right text-sm"></i>
  297.             </a>
  298.         </div>
  299.     </div>
  300. </section>
  302. <!-- ==================== SECTION MÉTIERS ==================== -->
  303. <section id="metiers" class="py-12 sm:py-20 bg-gradient-to-br from-indigo-50 to-purple-50 border-y border-indigo-200">
  304.     <div class="container mx-auto px-4 w-full max-w-full">
  305.         <div class="text-center mb-8 sm:mb-12">
  306.             <div class="inline-flex items-center rounded-full border border-indigo-200 bg-white px-3 sm:px-4 py-1.5 text-xs sm:text-sm font-semibold text-indigo-600 mb-4 shadow-sm">
  307.                 <i class="fas fa-school mr-2"></i>
  308.                 NOS METIERS
  309.             </div>
  310.             <h2 class="text-2xl sm:text-3xl md:text-4xl font-bold text-slate-900 mb-4 px-2">
  311.                 {{ stats.metiers }} métiers à découvrir
  312.             </h2>
  313.             <p class="text-sm sm:text-base md:text-lg text-slate-600 max-w-2xl mx-auto px-4">
  314.                 Filtrez par secteur ou recherchez un métier
  315.             </p>
  316.         </div>
  318.         <!-- Filtres - FIXED: mobile layout -->
  319.         <div class="max-w-3xl mx-auto mb-8 sm:mb-10 px-2">
  320.             <div class="flex flex-col sm:flex-row gap-3 sm:gap-4">
  321.                 <div class="flex-1">
  322.                     <div class="relative">
  323.                         <i class="fas fa-search absolute left-3 top-1/2 transform -translate-y-1/2 text-slate-400"></i>
  324.                         <input type="text" 
  325.                                id="search-input" 
  326.                                placeholder="Rechercher un métier..." 
  327.                                class="w-full pl-10 pr-4 py-2 sm:py-3 rounded-lg border border-indigo-200 bg-white text-slate-700 text-sm sm:text-base focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent"
  328.                                value="{{ rechercheMetier|default('') }}">
  329.                     </div>
  330.                 </div>
  331.                 <div class="flex-1">
  332.                     <select id="secteur-filter" class="w-full px-4 py-2 sm:py-3 rounded-lg border border-indigo-200 bg-white text-slate-700 text-sm sm:text-base focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent">
  333.                         <option value="">Tous les secteurs</option>
  334.                         {% for secteur in secteurs|default([]) %}
  335.                             <option value="{{ secteur.id }}" {{ secteurSelectionne|default('') == secteur.id ? 'selected' : '' }}>
  336.                                 {{ secteur.nom }}
  337.                             </option>
  338.                         {% endfor %}
  339.                     </select>
  340.                 </div>
  341.             </div>
  342.         </div>
  344.         <!-- Grille des métiers - FIXED: responsive grid -->
  345.         <div id="metiers-grid" class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-4 sm:gap-6">
  346.             {% include 'partials/_metiers_cards.html.twig' with {'metiers': metiers} %}
  347.         </div>
  349.         <!-- Loading indicator -->
  350.         <div id="loading" class="hidden text-center py-8">
  351.             <div class="inline-block w-8 h-8 border-4 border-indigo-200 border-t-indigo-600 rounded-full animate-spin"></div>
  352.         </div>
  354.         <!-- Pagination -->
  355.         <div id="pagination" class="flex justify-center mt-8 sm:mt-10"></div>
  356.         
  357.         <div class="text-center mt-6">
  358.             <a href="{{ path('app_metiers_list') }}" 
  359.             class="inline-flex items-center gap-2 px-6 py-3 bg-indigo-600 text-white rounded-xl font-semibold hover:bg-indigo-700 transition">
  360.                 <i class="fas fa-briefcase"></i>
  361.                 Voir tous les métiers
  362.                 <i class="fas fa-arrow-right text-sm"></i>
  363.             </a>
  364.         </div>
  365.     </div>
  366. </section>
  368. <!-- ==================== DOSSIER DE CANDIDATURE SECTION ==================== -->
  369. <section class="py-12 sm:py-20 bg-white">
  370.     <div class="container mx-auto px-4 w-full max-w-full">
  371.         <div class="text-center mb-8 sm:mb-12">
  372.             <div class="inline-flex items-center rounded-full border border-indigo-200 bg-white px-3 sm:px-4 py-1.5 text-xs sm:text-sm font-semibold text-indigo-600 mb-4 shadow-sm">
  373.                 <i class="fas fa-file-alt mr-2"></i>
  374.                 DOSSIER DE CANDIDATURE
  375.             </div>
  376.             <h2 class="text-2xl sm:text-3xl md:text-4xl font-bold text-slate-900 mb-4 px-2">
  377.                 Pièces à fournir
  378.             </h2>
  379.             <p class="text-sm sm:text-base md:text-lg text-slate-600 max-w-2xl mx-auto px-4">
  380.                 Préparez les documents nécessaires pour votre inscription
  381.             </p>
  382.         </div>
  384.         <div class="grid grid-cols-1 sm:grid-cols-2 gap-3 sm:gap-4 max-w-4xl mx-auto px-2">
  385.             <!-- Pièce 1 -->
  386.             <div class="bg-slate-50 rounded-xl p-4 sm:p-5 border border-slate-200 hover:shadow-lg transition-all hover:-translate-y-1 group">
  387.                 <div class="flex items-start gap-3">
  388.                     <div class="w-8 h-8 sm:w-10 sm:h-10 bg-indigo-100 rounded-lg flex items-center justify-center flex-shrink-0 group-hover:scale-110 transition group-hover:bg-indigo-200">
  389.                         <i class="fas fa-baby text-indigo-600 text-sm sm:text-base"></i>
  390.                     </div>
  391.                     <div>
  392.                         <h4 class="font-semibold text-sm sm:text-base text-slate-900">Extrait de naissance</h4>
  393.                         <p class="text-xs text-indigo-600 font-medium mt-1">Pièce n°1</p>
  394.                         <p class="text-xs text-slate-500 mt-2">Original ou photocopie de l'acte de naissance ou jugement supplétif</p>
  395.                     </div>
  396.                 </div>
  397.             </div>
  399.             <!-- Pièce 2 -->
  400.             <div class="bg-slate-50 rounded-xl p-4 sm:p-5 border border-slate-200 hover:shadow-lg transition-all hover:-translate-y-1 group">
  401.                 <div class="flex items-start gap-3">
  402.                     <div class="w-8 h-8 sm:w-10 sm:h-10 bg-purple-100 rounded-lg flex items-center justify-center flex-shrink-0 group-hover:scale-110 transition group-hover:bg-purple-200">
  403.                         <i class="fas fa-id-card text-purple-600 text-sm sm:text-base"></i>
  404.                     </div>
  405.                     <div>
  406.                         <h4 class="font-semibold text-sm sm:text-base text-slate-900">CNI ou attestation</h4>
  407.                         <p class="text-xs text-purple-600 font-medium mt-1">Pièce n°2</p>
  408.                         <p class="text-xs text-slate-500 mt-2">Carte Nationale d'Identité ou attestation d'identité en cours de validité</p>
  409.                     </div>
  410.                 </div>
  411.             </div>
  413.             <!-- Pièce 3 -->
  414.             <div class="bg-slate-50 rounded-xl p-4 sm:p-5 border border-slate-200 hover:shadow-lg transition-all hover:-translate-y-1 group">
  415.                 <div class="flex items-start gap-3">
  416.                     <div class="w-8 h-8 sm:w-10 sm:h-10 bg-pink-100 rounded-lg flex items-center justify-center flex-shrink-0 group-hover:scale-110 transition group-hover:bg-pink-200">
  417.                         <i class="fas fa-graduation-cap text-pink-600 text-sm sm:text-base"></i>
  418.                     </div>
  419.                     <div>
  420.                         <h4 class="font-semibold text-sm sm:text-base text-slate-900">Niveau scolaire</h4>
  421.                         <p class="text-xs text-pink-600 font-medium mt-1">Pièce n°3</p>
  422.                         <p class="text-xs text-slate-500 mt-2">Document attestant du niveau scolaire requis par secteur</p>
  423.                     </div>
  424.                 </div>
  425.             </div>
  427.             <!-- Pièce 4 -->
  428.             <div class="bg-slate-50 rounded-xl p-4 sm:p-5 border border-slate-200 hover:shadow-lg transition-all hover:-translate-y-1 group">
  429.                 <div class="flex items-start gap-3">
  430.                     <div class="w-8 h-8 sm:w-10 sm:h-10 bg-green-100 rounded-lg flex items-center justify-center flex-shrink-0 group-hover:scale-110 transition group-hover:bg-green-200">
  431.                         <i class="fas fa-heartbeat text-green-600 text-sm sm:text-base"></i>
  432.                     </div>
  433.                     <div>
  434.                         <h4 class="font-semibold text-sm sm:text-base text-slate-900">Carte CMU</h4>
  435.                         <p class="text-xs text-green-600 font-medium mt-1">Pièce n°4</p>
  436.                         <p class="text-xs text-slate-500 mt-2">Couverture Maladie Universelle (si disponible)</p>
  437.                     </div>
  438.                 </div>
  439.             </div>
  440.         </div>
  441.     </div>
  442. </section>
  444. <!-- ==================== CHRONOGRAMME SECTION ==================== -->
  445. <section class="py-12 sm:py-20 bg-gradient-to-br from-green-50 to-emerald-50 border-y border-green-200">
  446.     <div class="container mx-auto px-4 w-full max-w-full">
  447.         <div class="text-center mb-8 sm:mb-12">
  448.             <div class="inline-flex items-center rounded-full border border-green-200 bg-white px-3 sm:px-4 py-1.5 text-xs sm:text-sm font-semibold text-green-700 mb-4 shadow-sm">
  449.                 <i class="fas fa-calendar-alt mr-2"></i>
  450.                 CHRONOGRAMME
  451.             </div>
  452.             <h2 class="text-2xl sm:text-3xl md:text-4xl font-bold text-slate-900 mb-4 px-2">
  453.                 Calendrier des opérations
  454.             </h2>
  455.             <p class="text-sm sm:text-base md:text-lg text-slate-600 max-w-2xl mx-auto px-4">
  456.                 Les dates clés à retenir pour votre candidature
  457.             </p>
  458.         </div>
  460.         <div class="grid lg:grid-cols-5 gap-6 lg:gap-8 items-start">
  461.             <!-- Colonne gauche : Illustration SVG - FIXED: hide on mobile -->
  462.             <div class="relative col-span-2 hidden lg:block">
  463.                 <div class="relative rounded-2xl overflow-hidden shadow-xl bg-gradient-to-br from-white to-slate-100 p-8">
  464.                     <img src="{{ asset('svg/work-in-progress.svg') }}" alt="Calendrier des inscriptions" class="w-full h-auto object-contain" onerror="this.onerror=null; this.src='{{ asset('/svg/done-checking.svg') }}'">
  465.                 </div>
  466.                 
  467.                 <!-- Badge flottant -->
  468.                 <div class="absolute -bottom-4 -right-4 bg-white rounded-xl shadow-lg p-3 animate-float hidden md:block">
  469.                     <div class="flex items-center gap-2">
  470.                         <div class="w-10 h-10 bg-green-100 rounded-full flex items-center justify-center">
  471.                             <i class="fas fa-clock text-green-600"></i>
  472.                         </div>
  473.                         <div>
  474.                             <p class="text-sm font-bold text-green-600">Ne tardez pas !</p>
  475.                             <p class="text-xs text-slate-500">Inscriptions limitées</p>
  476.                         </div>
  477.                     </div>
  478.                 </div>
  479.             </div>
  481.             <!-- Colonne droite : Timeline -->
  482.             <div class="space-y-4 sm:space-y-6 col-span-3 px-2">
  483.                 <!-- Étape 1 -->
  484.                 <div class="relative flex items-start gap-3 sm:gap-4 group">
  485.                     <div class="w-8 h-8 sm:w-12 sm:h-12 bg-indigo-100 rounded-full flex items-center justify-center flex-shrink-0 group-hover:scale-110 transition group-hover:bg-indigo-200">
  486.                         <span class="text-sm sm:text-lg font-bold text-indigo-600">1</span>
  487.                     </div>
  488.                     <div class="flex-1 bg-white rounded-xl p-4 sm:p-5 shadow-md border border-indigo-100">
  489.                         <h4 class="text-base sm:text-lg font-bold text-slate-900">Dépôt des candidatures</h4>
  490.                         <p class="text-sm sm:text-base text-indigo-600 font-semibold mt-1">16 - 28 février 2026</p>
  491.                         <p class="text-xs sm:text-sm text-slate-600 mt-2">Dépôt en ligne ou dans les structures de formation</p>
  492.                     </div>
  493.                 </div>
  495.                 <!-- Étape 2 -->
  496.                 <div class="relative flex items-start gap-3 sm:gap-4 group">
  497.                     <div class="w-8 h-8 sm:w-12 sm:h-12 bg-purple-100 rounded-full flex items-center justify-center flex-shrink-0 group-hover:scale-110 transition group-hover:bg-purple-200">
  498.                         <span class="text-sm sm:text-lg font-bold text-purple-600">2</span>
  499.                     </div>
  500.                     <div class="flex-1 bg-white rounded-xl p-4 sm:p-5 shadow-md border border-purple-100">
  501.                         <h4 class="text-base sm:text-lg font-bold text-slate-900">Étude des dossiers</h4>
  502.                         <p class="text-sm sm:text-base text-purple-600 font-semibold mt-1">1er - 15 mars 2026</p>
  503.                         <p class="text-xs sm:text-sm text-slate-600 mt-2">Analyse de la conformité des pièces fournies</p>
  504.                     </div>
  505.                 </div>
  507.                 <!-- Étape 3 -->
  508.                 <div class="relative flex items-start gap-3 sm:gap-4 group">
  509.                     <div class="w-8 h-8 sm:w-12 sm:h-12 bg-pink-100 rounded-full flex items-center justify-center flex-shrink-0 group-hover:scale-110 transition group-hover:bg-pink-200">
  510.                         <span class="text-sm sm:text-lg font-bold text-pink-600">3</span>
  511.                     </div>
  512.                     <div class="flex-1 bg-white rounded-xl p-4 sm:p-5 shadow-md border border-pink-100">
  513.                         <h4 class="text-base sm:text-lg font-bold text-slate-900">Entretiens de sélection</h4>
  514.                         <p class="text-sm sm:text-base text-pink-600 font-semibold mt-1">16 mars - 15 avril 2026</p>
  515.                         <p class="text-xs sm:text-sm text-slate-600 mt-2">Évaluation des candidats par les jurys</p>
  516.                     </div>
  517.                 </div>
  519.                 <!-- Étape 4 -->
  520.                 <div class="relative flex items-start gap-3 sm:gap-4 group">
  521.                     <div class="w-8 h-8 sm:w-12 sm:h-12 bg-green-100 rounded-full flex items-center justify-center flex-shrink-0 group-hover:scale-110 transition group-hover:bg-green-200">
  522.                         <span class="text-sm sm:text-lg font-bold text-green-600">4</span>
  523.                     </div>
  524.                     <div class="flex-1 bg-white rounded-xl p-4 sm:p-5 shadow-md border border-green-100">
  525.                         <h4 class="text-base sm:text-lg font-bold text-slate-900">Début des formations</h4>
  526.                         <p class="text-sm sm:text-base text-green-600 font-semibold mt-1">Mai 2026</p>
  527.                         <p class="text-xs sm:text-sm text-slate-600 mt-2">Rentrée des promos dans les établissements de formation</p>
  528.                     </div>
  529.                 </div>
  530.             </div>
  531.         </div>
  532.     </div>
  533. </section>
  535. <!-- ==================== SECTION PARTENAIRES ==================== -->
  536. <section class="py-12 sm:py-16 bg-gradient-to-br from-slate-50 to-white border-t border-slate-200">
  537.     <div class="container mx-auto px-4 w-full max-w-full">
  538.         <div class="text-center mb-8 sm:mb-10">
  539.             <div class="inline-flex items-center rounded-full border border-indigo-200 bg-indigo-50 px-3 sm:px-4 py-1.5 text-xs sm:text-sm font-semibold text-indigo-600 mb-4 shadow-sm">
  540.                 <i class="fas fa-handshake mr-2"></i>
  541.                 ILS NOUS FONT CONFIANCE
  542.             </div>
  543.             <h2 class="text-xl sm:text-2xl md:text-3xl font-bold text-slate-800 mb-2 px-2">
  544.                 Nos partenaires institutionnels et techniques
  545.             </h2>
  546.             <p class="text-sm sm:text-base text-slate-600 max-w-2xl mx-auto px-4">
  547.                 Ils accompagnent la DAIP dans sa mission de formation et d'insertion professionnelle
  548.             </p>
  549.         </div>
  551.         <!-- CARROUSEL AVEC FLÈCHES SUR TOUS LES ÉCRANS -->
  552.         <div class="relative w-full flex justify-center"
  553.              x-data="partenairesCarousel"
  554.              @mouseenter="stopAutoplay"
  555.              @mouseleave="startAutoplay">
  556.             
  557.             <!-- Conteneur principal -->
  558.             <div class="w-full max-w-6xl px-4 md:px-8 relative">
  559.                 
  560.                 <!-- Bouton précédent - VISIBLE SUR MOBILE ET DESKTOP -->
  561.                 <button @click="prevSlide; $el.blur()" 
  562.                         class="absolute -left-2 sm:-left-3 md:-left-4 top-1/2 transform -translate-y-1/2 w-8 h-8 sm:w-10 sm:h-10 md:w-12 md:h-12 rounded-full bg-white shadow-lg hover:bg-indigo-600 hover:text-white transition-all duration-300 flex items-center justify-center border border-indigo-200 z-20 opacity-80 hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-indigo-400"
  563.                         title="Précédent"
  564.                         aria-label="Voir le partenaire précédent">
  565.                     <i class="fas fa-chevron-left text-xs sm:text-sm md:text-base"></i>
  566.                 </button>
  567.                 
  568.                 <!-- Conteneur du carrousel -->
  569.                 <div class="overflow-hidden">
  570.                     <div class="flex transition-transform duration-500 ease-out" 
  571.                          :style="'transform: translateX(-' + (currentSlide * 100 / slidesPerView) + '%)'">
  572.                         
  573.                         <template x-for="partenaire in partenaires" :key="partenaire.nom">
  574.                             <!-- Slide avec largeur dynamique -->
  575.                             <div class="flex-shrink-0 px-2 sm:px-3" :style="'width: ' + (100 / slidesPerView) + '%'">
  576.                                 <!-- Centrage de la carte -->
  577.                                 <div class="flex justify-center w-full">
  578.                                     <!-- Carte -->
  579.                                     <div class="w-full max-w-[260px] xs:max-w-[280px] sm:max-w-[300px] md:max-w-[320px]">
  580.                                         <a :href="partenaire.lien" 
  581.                                            target="_blank"
  582.                                            class="block group relative overflow-hidden rounded-xl shadow-md hover:shadow-xl transition-all duration-300 hover:-translate-y-1">
  583.                                             
  584.                                             <!-- Image avec ratio 3:2 -->
  585.                                             <div class="relative w-full pt-[66.67%] bg-gradient-to-br from-indigo-100 to-purple-100 rounded-xl overflow-hidden">
  586.                                                 
  587.                                                 <!-- Image de fond -->
  588.                                                 <div class="absolute inset-0 bg-cover bg-center transition-transform duration-500 group-hover:scale-105"
  589.                                                      :style="'background-image: url(' + partenaire.image + ')'"
  590.                                                      x-on:error="$el.style.backgroundImage = 'url(images/placeholder.jpg)'">
  591.                                                     
  592.                                                     <!-- Overlay -->
  593.                                                     <div class="absolute inset-0 bg-gradient-to-t from-black/80 via-black/30 to-transparent"></div>
  594.                                                     
  595.                                                     <!-- Nom du partenaire -->
  596.                                                     <div class="absolute bottom-0 left-0 right-0 p-3 sm:p-4 text-center">
  597.                                                         <h3 class="text-white font-bold text-xs sm:text-sm md:text-base drop-shadow-lg line-clamp-2 px-1" 
  598.                                                             x-text="partenaire.nom"></h3>
  599.                                                     </div>
  600.                                                 </div>
  601.                                             </div>
  602.                                         </a>
  603.                                     </div>
  604.                                 </div>
  605.                             </div>
  606.                         </template>
  607.                     </div>
  608.                 </div>
  610.                 <!-- Bouton suivant - VISIBLE SUR MOBILE ET DESKTOP -->
  611.                 <button @click="nextSlide; $el.blur()" 
  612.                         class="absolute -right-2 sm:-right-3 md:-right-4 top-1/2 transform -translate-y-1/2 w-8 h-8 sm:w-10 sm:h-10 md:w-12 md:h-12 rounded-full bg-white shadow-lg hover:bg-indigo-600 hover:text-white transition-all duration-300 flex items-center justify-center border border-indigo-200 z-20 opacity-80 hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-indigo-400"
  613.                         title="Suivant"
  614.                         aria-label="Voir le partenaire suivant">
  615.                     <i class="fas fa-chevron-right text-xs sm:text-sm md:text-base"></i>
  616.                 </button>
  617.             </div>
  618.         </div>
  620.         <!-- Indicateurs de slide -->
  621.         <div class="flex justify-center mt-6 sm:mt-8 space-x-2">
  622.             <template x-for="index in Math.ceil(partenaires.length / slidesPerView)" :key="index">
  623.                 <button @click="goToSlide(index - 1)" 
  624.                         class="h-2 sm:h-2.5 rounded-full transition-all duration-300 focus:outline-none focus:ring-2 focus:ring-indigo-400"
  625.                         :class="currentSlide === index - 1 ? 'w-6 sm:w-8 bg-indigo-600' : 'w-2 sm:w-2.5 bg-slate-300 hover:bg-indigo-400'"
  626.                         :aria-label="'Aller à la slide ' + index">
  627.                 </button>
  628.             </template>
  629.         </div>
  630.     </div>
  631. </section>
  633. <!-- ==================== INFOLINE SECTION ==================== -->
  634. <section class="py-12 sm:py-16 bg-gradient-to-r from-indigo-600 to-purple-600 text-white">
  635.     <div class="container mx-auto px-4 w-full max-w-full text-center">
  636.         <i class="fas fa-phone-alt text-3xl sm:text-4xl md:text-5xl mb-4 animate-pulse"></i>
  637.         <h3 class="text-xl sm:text-2xl md:text-3xl font-bold mb-2 px-2">Une question ? Besoin d'aide ?</h3>
  638.         <p class="text-sm sm:text-base text-white/80 mb-4 sm:mb-6">Notre équipe est à votre écoute du lundi au vendredi</p>
  639.         
  640.         <div class="flex flex-col sm:flex-row flex-wrap justify-center gap-3 sm:gap-6 px-2">
  641.             <a href="tel:+2252722229600" class="inline-flex items-center justify-center bg-white/10 backdrop-blur-sm rounded-lg px-4 sm:px-6 py-2 sm:py-3 border border-white/20 hover:bg-white/20 transition transform hover:scale-105 text-sm sm:text-base">
  642.                 <i class="fas fa-phone-alt mr-2"></i>
  643.                 27 22 22 96 00
  644.             </a>
  645.             <a href="tel:+2250565390459" class="inline-flex items-center justify-center bg-white/10 backdrop-blur-sm rounded-lg px-4 sm:px-6 py-2 sm:py-3 border border-white/20 hover:bg-white/20 transition transform hover:scale-105 text-sm sm:text-base">
  646.                 <i class="fas fa-phone-alt mr-2"></i>
  647.                 05 65 39 04 59
  648.             </a>
  649.             <a href="mailto:contact@daip.ci" class="inline-flex items-center justify-center bg-white/10 backdrop-blur-sm rounded-lg px-4 sm:px-6 py-2 sm:py-3 border border-white/20 hover:bg-white/20 transition transform hover:scale-105 text-sm sm:text-base break-all">
  650.                 <i class="fas fa-envelope mr-2"></i>
  651.                 contact@daip.ci
  652.             </a>
  653.         </div>
  654.     </div>
  655. </section>
  657. <!-- ==================== MODALE DES ÉTABLISSEMENTS ==================== -->
  658. <div id="etablissement-modal" class="fixed inset-0 z-50 hidden overflow-y-auto" aria-labelledby="modal-title" role="dialog" aria-modal="true">
  659.     <div class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
  660.         <!-- Background overlay -->
  661.         <div class="fixed inset-0 bg-slate-900 bg-opacity-75 transition-opacity modal-backdrop"></div>
  663.         <!-- Modal panel - FIXED: better mobile sizing -->
  664.         <div class="inline-block align-bottom bg-white rounded-2xl text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full w-full max-w-full mx-4">
  665.             <!-- En-tête -->
  666.             <div class="bg-gradient-to-r from-indigo-600 to-purple-600 px-4 sm:px-6 py-3 sm:py-4">
  667.                 <div class="flex items-center justify-between">
  668.                     <h3 class="text-base sm:text-lg font-semibold text-white" id="modal-title">
  669.                         Établissements de formation
  670.                     </h3>
  671.                     <button type="button" class="modal-close text-white/80 hover:text-white transition-colors">
  672.                         <i class="fas fa-times text-lg sm:text-xl"></i>
  673.                     </button>
  674.                 </div>
  675.                 <p class="text-xs sm:text-sm text-white/70 mt-1" id="modal-metier-name"></p>
  676.             </div>
  677.             
  678.             <!-- Corps de la modale -->
  679.             <div class="px-4 sm:px-6 py-3 sm:py-4 max-h-80 sm:max-h-96 overflow-y-auto">
  680.                 <div id="modal-etablissements-list" class="space-y-2">
  681.                 </div>
  682.             </div>
  683.         </div>
  684.     </div>
  685. </div>
  687. {% endblock %}
  688. {% block javascripts %}
  689. <!-- jQuery d'abord (si nécessaire) -->
  690. <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  691. <script>
  692. // ==================== DONNÉES PARTENAIRES ====================
  693. let partenairesData = {{ partenaires|default([])|json_encode|raw }};
  694. console.log('✅ Données partenaires du contrôleur:', partenairesData);
  696. // Corriger les chemins d'images (la racine web Symfony est deja /public)
  697. if (partenairesData && partenairesData.length > 0) {
  698.     partenairesData = partenairesData.map(partenaire => {
  699.         if (partenaire.image && partenaire.image.startsWith('/public/')) {
  700.             partenaire.image = partenaire.image.replace('/public', '');
  701.         } else if (partenaire.image && partenaire.image.startsWith('public/')) {
  702.             partenaire.image = '/' + partenaire.image.replace('public/', '');
  703.         } else if (partenaire.image && partenaire.image.startsWith('image/')) {
  704.             partenaire.image = '/' + partenaire.image;
  705.         }
  706.         return partenaire;
  707.     });
  708.     console.log('✅ Chemins d\'images corrigés:', partenairesData);
  709. }
  711. // CRÉER UNE SEULE INSTANCE GLOBALE
  712. let carouselInstance = null;
  714. window.partenairesCarousel = function() {
  715.     // Si l'instance existe déjà, la retourner
  716.     if (carouselInstance) {
  717.         console.log('⚠️ Utilisation de l\'instance existante');
  718.         return carouselInstance;
  719.     }
  720.     
  721.     // Créer la nouvelle instance
  722.     carouselInstance = {
  723.         partenaires: partenairesData || [],
  724.         currentSlide: 0,
  725.         slidesPerView: 1, // CHANGÉ : 1 au lieu de 4
  726.         autoplayInterval: null,
  727.         _eventListenersAdded: false,
  729.         init() {
  730.             console.log('🎠 Carousel initialisé');
  731.             
  732.             if (!this.partenaires || this.partenaires.length === 0) return;
  733.             
  734.             // Ajouter les event listeners UNE SEULE FOIS
  735.             if (!this._eventListenersAdded) {
  736.                 this._eventListenersAdded = true;
  737.                 this.updateSlidesPerView();
  738.                 window.addEventListener('resize', () => this.updateSlidesPerView());
  739.                 this.startAutoplay();
  740.             }
  741.         },
  743.         updateSlidesPerView() {
  744.             // CORRECTION : Ne pas dépasser le nombre de partenaires
  745.             const width = window.innerWidth;
  746.             let newValue;
  747.             
  748.             if (width < 640) {
  749.                 newValue = 1; // Mobile
  750.             } else if (width < 768) {
  751.                 newValue = 2; // Petite tablette
  752.             } else if (width < 1024) {
  753.                 newValue = 3; // Tablette/Desktop
  754.             } else {
  755.                 newValue = 4; // Grand écran
  756.             }
  757.             
  758.             // TRÈS IMPORTANT : Ne jamais afficher plus de cartes que de partenaires
  759.             this.slidesPerView = Math.min(newValue, this.partenaires.length);
  760.             
  761.             // Ajuster la slide courante si nécessaire
  762.             const totalSlides = Math.ceil(this.partenaires.length / this.slidesPerView);
  763.             if (this.currentSlide >= totalSlides) {
  764.                 this.currentSlide = Math.max(0, totalSlides - 1);
  765.             }
  766.         },
  768.         startAutoplay() {
  769.             this.stopAutoplay();
  770.             if (this.partenaires.length > this.slidesPerView) {
  771.                 this.autoplayInterval = setInterval(() => this.nextSlide(), 5000);
  772.             }
  773.         },
  775.         stopAutoplay() {
  776.             if (this.autoplayInterval) {
  777.                 clearInterval(this.autoplayInterval);
  778.                 this.autoplayInterval = null;
  779.             }
  780.         },
  782.         nextSlide() {
  783.             if (!this.partenaires?.length) return;
  784.             const totalSlides = Math.ceil(this.partenaires.length / this.slidesPerView);
  785.             if (totalSlides <= 1) return;
  786.             this.currentSlide = (this.currentSlide + 1) % totalSlides;
  787.         },
  789.         prevSlide() {
  790.             if (!this.partenaires?.length) return;
  791.             const totalSlides = Math.ceil(this.partenaires.length / this.slidesPerView);
  792.             if (totalSlides <= 1) return;
  793.             this.currentSlide = (this.currentSlide - 1 + totalSlides) % totalSlides;
  794.         },
  796.         goToSlide(index) {
  797.             const totalSlides = Math.ceil(this.partenaires.length / this.slidesPerView);
  798.             if (index >= 0 && index < totalSlides) this.currentSlide = index;
  799.         }
  800.     };
  801.     
  802.     return carouselInstance;
  803. };
  804. </script>
  806. <!-- Alpine.js ENSUITE -->
  807. <script src="https://cdn.jsdelivr.net/npm/alpinejs@3.13.10/dist/cdn.min.js" ></script>
  809. {{ parent() }}
  810. <script src="{{ asset('public/js/animation.js') }}"></script>
  811. <script src="{{ asset('public/js/common.js') }}"></script>
  817. <script>
  820. // ==================== GESTION DE LA MODALE ====================
  821. document.addEventListener('DOMContentLoaded', function() {
  822.     // Vérifier que Alpine est chargé
  823.     console.log('DOM chargé, Alpine.js disponible:', typeof Alpine !== 'undefined');
  824.     
  825.     // Initialisation des établissements et métiers
  826.     initEtablissements();
  827.     initMetiers();
  828.     
  829.     // Gestion de la modale
  830.     initModal();
  831. });
  833. // Fonction pour initialiser la modale
  834. function initModal() {
  835.     const modal = document.getElementById('etablissement-modal');
  836.     if (!modal) return;
  837.     
  838.     const modalMetierName = document.getElementById('modal-metier-name');
  839.     const modalList = document.getElementById('modal-etablissements-list');
  840.     const closeButtons = document.querySelectorAll('.modal-close');
  841.     const backdrop = document.querySelector('.modal-backdrop');
  842.     
  843.     window.openEtablissementsModal = function(metierId, metierNom, etablissementsData) {
  844.         try {
  845.             const etablissements = JSON.parse(etablissementsData);
  846.             
  847.             modalMetierName.textContent = `Métier: ${metierNom}`;
  848.             
  849.             let html = '';
  850.             etablissements.forEach(em => {
  851.                 html += `
  852.                     <a href="/candidature/new?etablissement=${em.id}&metier=${metierId}" 
  853.                        class="block p-2 sm:p-3 bg-slate-50 hover:bg-indigo-50 rounded-lg transition-colors group">
  854.                         <div class="flex items-center justify-between">
  855.                             <span class="text-sm sm:text-base font-medium text-slate-900 group-hover:text-indigo-700">${em.nom}</span>
  856.                             <i class="fas fa-chevron-right text-slate-400 group-hover:text-indigo-600 text-xs sm:text-sm"></i>
  857.                         </div>
  858.                         ${em.places ? `<p class="text-xs text-slate-500 mt-1">${em.places} place(s) disponible(s)</p>` : ''}
  859.                     </a>
  860.                 `;
  861.             });
  862.             modalList.innerHTML = html;
  863.             
  864.             modal.classList.remove('hidden');
  865.             document.body.style.overflow = 'hidden';
  866.             
  867.         } catch (e) {
  868.             console.error('Erreur:', e);
  869.         }
  870.     };
  871.     
  872.     function closeModal() {
  873.         modal.classList.add('hidden');
  874.         document.body.style.overflow = '';
  875.     }
  876.     
  877.     closeButtons.forEach(btn => {
  878.         btn.addEventListener('click', closeModal);
  879.     });
  880.     
  881.     if (backdrop) {
  882.         backdrop.addEventListener('click', closeModal);
  883.     }
  884.     
  885.     document.addEventListener('keydown', function(e) {
  886.         if (e.key === 'Escape' && !modal.classList.contains('hidden')) {
  887.             closeModal();
  888.         }
  889.     });
  890.     
  891.     document.addEventListener('click', function(e) {
  892.         const btn = e.target.closest('.etablissement-modal-btn');
  893.         if (btn) {
  894.             e.preventDefault();
  895.             const metierId = btn.dataset.metierId;
  896.             const metierNom = btn.dataset.metierNom;
  897.             const etablissements = btn.dataset.etablissements;
  898.             openEtablissementsModal(metierId, metierNom, etablissements);
  899.         }
  900.     });
  901. }
  903. // ==================== GESTION DES ÉTABLISSEMENTS ====================
  904. function initEtablissements() {
  905.     const elements = {
  906.         champRecherche: document.getElementById('etablissement-search'),
  907.         listeDirection: document.getElementById('dr-filter'),
  908.         grille: document.getElementById('etablissements-grid'),
  909.         indicateurChargement: document.getElementById('etablissements-loading'),
  910.         zonePagination: document.getElementById('etablissements-pagination')
  911.     };
  912.     
  913.     if (!elements.grille) return;
  914.     
  915.     let etatEtablissements = {
  916.         pageCourante: {{ pageEtablissementActuelle|default(1) }},
  917.         nombreTotalPages: Math.ceil({{ totalEtablissements|default(0) }} / 9) || 1,
  918.         enCoursDeChargement: false,
  919.         temporisateur: null
  920.     };
  921.     
  922.     async function chargerEtablissements(numeroPage = 1) {
  923.         if (etatEtablissements.enCoursDeChargement) return;
  924.         
  925.         const direction = elements.listeDirection?.value || '';
  926.         const recherche = elements.champRecherche?.value.trim() || '';
  927.         
  928.         etatEtablissements.enCoursDeChargement = true;
  929.         if (elements.indicateurChargement) elements.indicateurChargement.classList.remove('hidden');
  930.         
  931.         try {
  932.             const url = new URL('/load-etablissements', window.location.origin);
  933.             url.searchParams.append('page', numeroPage);
  934.             url.searchParams.append('limit', 9);
  935.             if (direction) url.searchParams.append('direction', direction);
  936.             if (recherche) url.searchParams.append('recherche', recherche);
  937.             
  938.             const reponse = await fetch(url);
  939.             const donnees = await reponse.json();
  940.             
  941.             if (elements.grille) {
  942.                 elements.grille.innerHTML = donnees.html;
  943.             }
  944.             
  945.             etatEtablissements.pageCourante = donnees.page;
  946.             etatEtablissements.nombreTotalPages = Math.ceil(donnees.total / 9);
  947.             
  948.             mettreAJourPaginationEtablissements();
  949.             
  950.         } catch (erreur) {
  951.             console.error('Erreur chargement établissements:', erreur);
  952.         } finally {
  953.             etatEtablissements.enCoursDeChargement = false;
  954.             if (elements.indicateurChargement) {
  955.                 elements.indicateurChargement.classList.add('hidden');
  956.             }
  957.         }
  958.     }
  959.     
  960.     function mettreAJourPaginationEtablissements() {
  961.         if (!elements.zonePagination) return;
  962.         
  963.         if (etatEtablissements.nombreTotalPages <= 1) {
  964.             elements.zonePagination.innerHTML = '';
  965.             return;
  966.         }
  967.         
  968.         let html = '<nav class="flex items-center gap-1 sm:gap-2 flex-wrap justify-center">';
  969.         
  970.         html += `<button class="etablissements-prev px-2 sm:px-3 py-1 sm:py-2 rounded-lg border border-white/30 bg-white/10 backdrop-blur-sm text-white hover:bg-white/20 transition-all text-sm sm:text-base ${etatEtablissements.pageCourante === 1 ? 'opacity-50 cursor-not-allowed' : ''}" ${etatEtablissements.pageCourante === 1 ? 'disabled' : ''}>
  971.                     <i class="fas fa-chevron-left text-xs sm:text-sm"></i>
  972.                 </button>`;
  973.         
  974.         let pageDepart = Math.max(1, etatEtablissements.pageCourante - 2);
  975.         let pageFin = Math.min(etatEtablissements.nombreTotalPages, pageDepart + 4);
  976.         
  977.         if (pageDepart > 1) {
  978.             html += `<button class="etablissements-page px-2 sm:px-4 py-1 sm:py-2 rounded-lg border border-white/30 bg-white/10 backdrop-blur-sm text-white hover:bg-white/20 text-sm sm:text-base" data-page="1">1</button>`;
  979.             if (pageDepart > 2) {
  980.                 html += `<span class="px-1 sm:px-2 text-white/50 text-sm sm:text-base">...</span>`;
  981.             }
  982.         }
  983.         
  984.         for (let i = pageDepart; i <= pageFin; i++) {
  985.             html += `<button class="etablissements-page px-2 sm:px-4 py-1 sm:py-2 rounded-lg border transition-all text-sm sm:text-base 
  986.                 ${etatEtablissements.pageCourante === i 
  987.                     ? 'bg-white text-indigo-700 border-white font-bold' 
  988.                     : 'border-white/30 bg-white/10 backdrop-blur-sm text-white hover:bg-white/20'}" 
  989.                 data-page="${i}">${i}</button>`;
  990.         }
  991.         
  992.         if (pageFin < etatEtablissements.nombreTotalPages) {
  993.             if (pageFin < etatEtablissements.nombreTotalPages - 1) {
  994.                 html += `<span class="px-1 sm:px-2 text-white/50 text-sm sm:text-base">...</span>`;
  995.             }
  996.             html += `<button class="etablissements-page px-2 sm:px-4 py-1 sm:py-2 rounded-lg border border-white/30 bg-white/10 backdrop-blur-sm text-white hover:bg-white/20 text-sm sm:text-base" data-page="${etatEtablissements.nombreTotalPages}">${etatEtablissements.nombreTotalPages}</button>`;
  997.         }
  998.         
  999.         html += `<button class="etablissements-next px-2 sm:px-3 py-1 sm:py-2 rounded-lg border border-white/30 bg-white/10 backdrop-blur-sm text-white hover:bg-white/20 transition-all text-sm sm:text-base ${etatEtablissements.pageCourante === etatEtablissements.nombreTotalPages ? 'opacity-50 cursor-not-allowed' : ''}" ${etatEtablissements.pageCourante === etatEtablissements.nombreTotalPages ? 'disabled' : ''}>
  1000.                     <i class="fas fa-chevron-right text-xs sm:text-sm"></i>
  1001.                 </button>`;
  1002.         
  1003.         html += '</nav>';
  1004.         elements.zonePagination.innerHTML = html;
  1005.         
  1006.         elements.zonePagination.querySelectorAll('.etablissements-page').forEach(btn => {
  1007.             btn.addEventListener('click', (e) => {
  1008.                 e.preventDefault();
  1009.                 const page = parseInt(e.currentTarget.dataset.page);
  1010.                 if (page !== etatEtablissements.pageCourante) {
  1011.                     chargerEtablissements(page);
  1012.                 }
  1013.             });
  1014.         });
  1015.         
  1016.         elements.zonePagination.querySelector('.etablissements-prev')?.addEventListener('click', (e) => {
  1017.             e.preventDefault();
  1018.             if (etatEtablissements.pageCourante > 1 && !e.currentTarget.disabled) {
  1019.                 chargerEtablissements(etatEtablissements.pageCourante - 1);
  1020.             }
  1021.         });
  1022.         
  1023.         elements.zonePagination.querySelector('.etablissements-next')?.addEventListener('click', (e) => {
  1024.             e.preventDefault();
  1025.             if (etatEtablissements.pageCourante < etatEtablissements.nombreTotalPages && !e.currentTarget.disabled) {
  1026.                 chargerEtablissements(etatEtablissements.pageCourante + 1);
  1027.             }
  1028.         });
  1029.     }
  1030.     
  1031.     if (elements.listeDirection) {
  1032.         elements.listeDirection.addEventListener('change', () => chargerEtablissements(1));
  1033.     }
  1034.     
  1035.     if (elements.champRecherche) {
  1036.         elements.champRecherche.addEventListener('input', () => {
  1037.             clearTimeout(etatEtablissements.temporisateur);
  1038.             etatEtablissements.temporisateur = setTimeout(() => chargerEtablissements(1), 500);
  1039.         });
  1040.     }
  1041.     
  1042.     mettreAJourPaginationEtablissements();
  1043. }
  1045. // ==================== GESTION DES MÉTIERS ====================
  1046. function initMetiers() {
  1047.     const elements = {
  1048.         champRecherche: document.getElementById('search-input'),
  1049.         listeSecteur: document.getElementById('secteur-filter'),
  1050.         grille: document.getElementById('metiers-grid'),
  1051.         indicateurChargement: document.getElementById('loading'),
  1052.         zonePagination: document.getElementById('pagination')
  1053.     };
  1054.     
  1055.     if (!elements.grille) return;
  1056.     
  1057.     let etatMetiers = {
  1058.         pageCourante: {{ pageMetierActuelle|default(1) }},
  1059.         nombreTotalPages: Math.ceil({{ totalMetiers|default(0) }} / 9) || 1,
  1060.         enCoursDeChargement: false,
  1061.         temporisateur: null
  1062.     };
  1063.     
  1064.     async function chargerMetiers(numeroPage = 1) {
  1065.         if (etatMetiers.enCoursDeChargement) return;
  1066.         
  1067.         const secteur = elements.listeSecteur?.value || '';
  1068.         const recherche = elements.champRecherche?.value.trim() || '';
  1069.         
  1070.         etatMetiers.enCoursDeChargement = true;
  1071.         if (elements.indicateurChargement) elements.indicateurChargement.classList.remove('hidden');
  1072.         
  1073.         try {
  1074.             const url = new URL('/load-metiers', window.location.origin);
  1075.             url.searchParams.append('page', numeroPage);
  1076.             url.searchParams.append('limit', 9);
  1077.             if (secteur) url.searchParams.append('secteur', secteur);
  1078.             if (recherche) url.searchParams.append('recherche', recherche);
  1079.             
  1080.             const reponse = await fetch(url);
  1081.             const donnees = await reponse.json();
  1082.             
  1083.             if (elements.grille) {
  1084.                 elements.grille.innerHTML = donnees.html;
  1085.             }
  1086.             
  1087.             etatMetiers.pageCourante = donnees.page;
  1088.             etatMetiers.nombreTotalPages = Math.ceil(donnees.total / 9);
  1089.             
  1090.             mettreAJourPaginationMetiers();
  1091.             
  1092.         } catch (erreur) {
  1093.             console.error('Erreur chargement métiers:', erreur);
  1094.         } finally {
  1095.             etatMetiers.enCoursDeChargement = false;
  1096.             if (elements.indicateurChargement) {
  1097.                 elements.indicateurChargement.classList.add('hidden');
  1098.             }
  1099.         }
  1100.     }
  1101.     
  1102.     function mettreAJourPaginationMetiers() {
  1103.         if (!elements.zonePagination) return;
  1104.         
  1105.         if (etatMetiers.nombreTotalPages <= 1) {
  1106.             elements.zonePagination.innerHTML = '';
  1107.             return;
  1108.         }
  1109.         
  1110.         let html = '<nav class="flex items-center gap-1 sm:gap-2 flex-wrap justify-center">';
  1111.         
  1112.         html += `<button class="metiers-prev px-2 sm:px-3 py-1 sm:py-2 rounded-lg border border-indigo-200 bg-white text-indigo-600 hover:bg-indigo-50 transition-all text-sm sm:text-base ${etatMetiers.pageCourante === 1 ? 'opacity-50 cursor-not-allowed' : ''}" ${etatMetiers.pageCourante === 1 ? 'disabled' : ''}>
  1113.                     <i class="fas fa-chevron-left text-xs sm:text-sm"></i>
  1114.                 </button>`;
  1115.         
  1116.         let pageDepart = Math.max(1, etatMetiers.pageCourante - 2);
  1117.         let pageFin = Math.min(etatMetiers.nombreTotalPages, pageDepart + 4);
  1118.         
  1119.         if (pageDepart > 1) {
  1120.             html += `<button class="metiers-page px-2 sm:px-4 py-1 sm:py-2 rounded-lg border border-indigo-200 bg-white text-indigo-600 hover:bg-indigo-50 text-sm sm:text-base" data-page="1">1</button>`;
  1121.             if (pageDepart > 2) {
  1122.                 html += `<span class="px-1 sm:px-2 text-indigo-400 text-sm sm:text-base">...</span>`;
  1123.             }
  1124.         }
  1125.         
  1126.         for (let i = pageDepart; i <= pageFin; i++) {
  1127.             html += `<button class="metiers-page px-2 sm:px-4 py-1 sm:py-2 rounded-lg border transition-all text-sm sm:text-base 
  1128.                 ${etatMetiers.pageCourante === i 
  1129.                     ? 'bg-indigo-600 text-white border-indigo-600 font-bold' 
  1130.                     : 'border-indigo-200 bg-white text-indigo-600 hover:bg-indigo-50'}" 
  1131.                 data-page="${i}">${i}</button>`;
  1132.         }
  1133.         
  1134.         if (pageFin < etatMetiers.nombreTotalPages) {
  1135.             if (pageFin < etatMetiers.nombreTotalPages - 1) {
  1136.                 html += `<span class="px-1 sm:px-2 text-indigo-400 text-sm sm:text-base">...</span>`;
  1137.             }
  1138.             html += `<button class="metiers-page px-2 sm:px-4 py-1 sm:py-2 rounded-lg border border-indigo-200 bg-white text-indigo-600 hover:bg-indigo-50 text-sm sm:text-base" data-page="${etatMetiers.nombreTotalPages}">${etatMetiers.nombreTotalPages}</button>`;
  1139.         }
  1140.         
  1141.         html += `<button class="metiers-next px-2 sm:px-3 py-1 sm:py-2 rounded-lg border border-indigo-200 bg-white text-indigo-600 hover:bg-indigo-50 transition-all text-sm sm:text-base ${etatMetiers.pageCourante === etatMetiers.nombreTotalPages ? 'opacity-50 cursor-not-allowed' : ''}" ${etatMetiers.pageCourante === etatMetiers.nombreTotalPages ? 'disabled' : ''}>
  1142.                     <i class="fas fa-chevron-right text-xs sm:text-sm"></i>
  1143.                 </button>`;
  1144.         
  1145.         html += '</nav>';
  1146.         elements.zonePagination.innerHTML = html;
  1147.         
  1148.         elements.zonePagination.querySelectorAll('.metiers-page').forEach(btn => {
  1149.             btn.addEventListener('click', (e) => {
  1150.                 e.preventDefault();
  1151.                 const page = parseInt(e.currentTarget.dataset.page);
  1152.                 if (page !== etatMetiers.pageCourante) {
  1153.                     chargerMetiers(page);
  1154.                 }
  1155.             });
  1156.         });
  1157.         
  1158.         elements.zonePagination.querySelector('.metiers-prev')?.addEventListener('click', (e) => {
  1159.             e.preventDefault();
  1160.             if (etatMetiers.pageCourante > 1 && !e.currentTarget.disabled) {
  1161.                 chargerMetiers(etatMetiers.pageCourante - 1);
  1162.             }
  1163.         });
  1164.         
  1165.         elements.zonePagination.querySelector('.metiers-next')?.addEventListener('click', (e) => {
  1166.             e.preventDefault();
  1167.             if (etatMetiers.pageCourante < etatMetiers.nombreTotalPages && !e.currentTarget.disabled) {
  1168.                 chargerMetiers(etatMetiers.pageCourante + 1);
  1169.             }
  1170.         });
  1171.     }
  1172.     
  1173.     if (elements.listeSecteur) {
  1174.         elements.listeSecteur.addEventListener('change', () => chargerMetiers(1));
  1175.     }
  1176.     
  1177.     if (elements.champRecherche) {
  1178.         elements.champRecherche.addEventListener('input', () => {
  1179.             clearTimeout(etatMetiers.temporisateur);
  1180.             etatMetiers.temporisateur = setTimeout(() => chargerMetiers(1), 500);
  1181.         });
  1182.     }
  1183.     
  1184.     mettreAJourPaginationMetiers();
  1185. }
  1186. </script>
  1187. {% endblock %}