{"id":4949,"date":"2026-06-29T16:13:58","date_gmt":"2026-06-29T14:13:58","guid":{"rendered":"https:\/\/lesconnectees.org\/?page_id=4949"},"modified":"2026-06-29T16:24:19","modified_gmt":"2026-06-29T14:24:19","slug":"nos-formations-n2","status":"publish","type":"page","link":"https:\/\/lesconnectees.org\/index.php\/nos-formations-n2\/","title":{"rendered":"Nos Formations"},"content":{"rendered":"\n<div class=\"formations-header\" id=\"formationsHeader\">\n  <canvas class=\"network-bg\" id=\"headerNetwork\"><\/canvas>\n  <div class=\"formations-header-content\">\n    <h1><span class=\"white\">Toutes<\/span> <span class=\"highlight\">Nos formations<\/span><\/h1>\n    <p class=\"subtitle\">Des ateliers num\u00e9riques pour tous les niveaux, en pr\u00e9sentiel ou dans vos locaux.<\/p>\n    <a href=\"https:\/\/docs.google.com\/forms\/d\/1yndJYCWG1DQCMRuFuMQUHO-b53KOzFZeqfZjOZVTKb0\/preview\" class=\"btn-orange\" target=\"_blank\">S\u2019inscrire \u00e0 un atelier \u2192<\/a>\n  <\/div>\n<\/div>\n\n<style>\n\/* ===== STYLES BANNER ===== *\/\n@import url('https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@400;500;600;700;800&display=swap');\n\n.formations-header {\n  position: relative;\n  background: linear-gradient(135deg, #004C6E 0%, #002a3d 100%);\n  padding: 4rem 2rem;\n  text-align: center;\n  border-radius: 28px;\n  margin-bottom: 3rem;\n  overflow: hidden;\n  font-family: 'Inter', sans-serif;\n}\n.formations-header-content {\n  position: relative;\n  z-index: 2;\n  max-width: 800px;\n  margin: 0 auto;\n}\n.network-bg {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  pointer-events: none;\n  z-index: 1;\n  opacity: 0.5;\n}\n.formations-header h1 {\n  font-size: clamp(2.5rem, 6vw, 4rem);\n  font-weight: 800;\n  margin: 0 0 0.5rem 0;\n  letter-spacing: -0.02em;\n  text-shadow: 0 2px 4px rgba(0,0,0,0.3);\n}\n.formations-header h1 .white {\n  color: #ffffff;\n}\n.formations-header h1 .highlight {\n  color: #F97316;\n}\n.formations-header .subtitle {\n  font-size: clamp(1.1rem, 2vw, 1.4rem);\n  color: rgba(255,255,255,0.85);\n  margin: 0 0 1.5rem 0;\n  line-height: 1.5;\n}\n.btn-orange {\n  display: inline-flex;\n  align-items: center;\n  background: #F97316;\n  color: white;\n  text-decoration: none;\n  font-weight: 700;\n  padding: 14px 32px;\n  border-radius: 60px;\n  font-size: 0.95rem;\n  transition: all 0.3s cubic-bezier(0.2, 0.9, 0.4, 1.1);\n  box-shadow: 0 6px 0 #B45309;\n  position: relative;\n  overflow: hidden;\n  letter-spacing: 0.3px;\n  cursor: pointer;\n  border: none;\n  font-family: inherit;\n}\n.btn-orange::before {\n  content: '';\n  position: absolute;\n  top: 0;\n  left: -100%;\n  width: 100%;\n  height: 100%;\n  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);\n  transition: left 0.5s ease;\n}\n.btn-orange:hover::before {\n  left: 100%;\n}\n.btn-orange:hover {\n  transform: translateY(-3px);\n  box-shadow: 0 10px 20px -5px rgba(0,0,0,0.4), 0 4px 0 #B45309;\n  background: #ff8820;\n}\n.btn-orange:active {\n  transform: translateY(2px);\n  box-shadow: 0 4px 0 #B45309;\n}\n@media (max-width: 480px) {\n  .btn-orange { padding: 12px 24px; font-size: 0.9rem; }\n}\n<\/style>\n\n<script>\ndocument.addEventListener('DOMContentLoaded', function() {\n  const canvas = document.getElementById('headerNetwork');\n  if (!canvas) return;\n  const ctx = canvas.getContext('2d');\n  let width, height;\n  let points = [];\n  const numPoints = 50;\n  const maxDist = 160;\n\n  function resize() {\n    const rect = canvas.parentElement.getBoundingClientRect();\n    canvas.width = rect.width;\n    canvas.height = rect.height;\n    width = canvas.width;\n    height = canvas.height;\n  }\n\n  function initPoints() {\n    points = [];\n    for (let i = 0; i < numPoints; i++) {\n      points.push({\n        x: Math.random() * width,\n        y: Math.random() * height,\n        vx: (Math.random() - 0.5) * 0.3,\n        vy: (Math.random() - 0.5) * 0.3\n      });\n    }\n  }\n\n  function draw() {\n    ctx.clearRect(0, 0, width, height);\n    for (let i = 0; i < points.length; i++) {\n      for (let j = i + 1; j < points.length; j++) {\n        const dx = points[i].x - points[j].x;\n        const dy = points[i].y - points[j].y;\n        const dist = Math.sqrt(dx * dx + dy * dy);\n        if (dist < maxDist) {\n          const opacity = 1 - (dist \/ maxDist);\n          ctx.beginPath();\n          ctx.moveTo(points[i].x, points[i].y);\n          ctx.lineTo(points[j].x, points[j].y);\n          ctx.strokeStyle = 'rgba(255, 122, 0, ' + (opacity * 0.4) + ')';\n          ctx.lineWidth = 1.2;\n          ctx.stroke();\n        }\n      }\n    }\n    points.forEach(function(p) {\n      ctx.beginPath();\n      ctx.arc(p.x, p.y, 2.5, 0, 2 * Math.PI);\n      ctx.fillStyle = 'rgba(255, 122, 0, 0.5)';\n      ctx.fill();\n    });\n  }\n\n  function update() {\n    points.forEach(function(p) {\n      p.x += p.vx;\n      p.y += p.vy;\n      if (p.x < 0 || p.x > width) p.vx *= -1;\n      if (p.y < 0 || p.y > height) p.vy *= -1;\n    });\n  }\n\n  function animate() {\n    update();\n    draw();\n    requestAnimationFrame(animate);\n  }\n\n  function reset() {\n    resize();\n    initPoints();\n  }\n\n  window.addEventListener('resize', reset);\n  reset();\n  animate();\n});\n<\/script>\n\n\n\n<style data-wp-block-html=\"css\">\n    @import url('https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@400;500;600;700;800&display=swap');\n    #bloc-numerique-pro {\n      padding: 4rem 1.5rem;\n      font-family: 'Inter', sans-serif;\n      max-width: 1280px;\n      margin: 0 auto;\n      background: #fbf9f7;\n    }\n    #bloc-numerique-pro .section-title {\n      font-size: clamp(3rem, 12vw, 5rem);\n      font-weight: 800;\n      letter-spacing: -0.03em;\n      margin: 0 0 2rem 0;\n      color: #0a0a0a;\n      text-shadow: 4px 4px 0 rgba(255,122,0,0.7), 2px 2px 0 rgba(255,122,0,0.3);\n      text-align: center;\n    }\n    #bloc-numerique-pro .grid-cards {\n      display: grid;\n      grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));\n      gap: 2.5rem;\n      margin-top: 1rem;\n    }\n    #bloc-numerique-pro .card {\n      background: #ffffff;\n      border-radius: 40px 40px 28px 28px;\n      box-shadow: 0 20px 60px rgba(0,0,0,0.06), 0 8px 24px rgba(0,0,0,0.03);\n      border: 1px solid rgba(0,0,0,0.04);\n      overflow: hidden;\n      transition: transform 0.5s cubic-bezier(0.23,1,0.32,1), box-shadow 0.6s ease, border-color 0.4s;\n      display: flex;\n      flex-direction: column;\n    }\n    #bloc-numerique-pro .card:hover {\n      transform: translateY(-18px) scale(1.02);\n      box-shadow: 0 40px 80px rgba(255,122,0,0.15), 0 20px 40px rgba(255,122,0,0.08);\n      border-color: rgba(255,122,0,0.25);\n    }\n    #bloc-numerique-pro .banner {\n      background: linear-gradient(145deg, #004C6E 0%, #00263b 100%);\n      padding: 2rem 1.8rem 1.4rem;\n      display: flex;\n      align-items: center;\n      gap: 1.2rem;\n      min-height: 100px;\n      position: relative;\n      overflow: hidden;\n    }\n    #bloc-numerique-pro .banner::after {\n      content: '';\n      position: absolute;\n      top: -50%;\n      right: -20%;\n      width: 200px;\n      height: 200px;\n      background: radial-gradient(circle, rgba(255,122,0,0.12), transparent 70%);\n      border-radius: 50%;\n      pointer-events: none;\n    }\n    #bloc-numerique-pro .banner .icon {\n      font-size: 3rem;\n      background: rgba(255,255,255,0.1);\n      width: 72px;\n      height: 72px;\n      border-radius: 24px;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      flex-shrink: 0;\n      color: #FF7A00;\n      backdrop-filter: blur(6px);\n      border: 1px solid rgba(255,255,255,0.08);\n      transition: transform 0.4s, background 0.3s;\n      position: relative;\n      z-index: 2;\n    }\n    #bloc-numerique-pro .card:hover .banner .icon {\n      transform: scale(1.08) rotate(-6deg);\n      background: rgba(255,255,255,0.18);\n    }\n    #bloc-numerique-pro .banner h3 {\n      font-size: 1.5rem;\n      font-weight: 700;\n      color: #ffffff;\n      margin: 0;\n      line-height: 1.3;\n      letter-spacing: -0.01em;\n      position: relative;\n      z-index: 2;\n      text-shadow: 0 2px 8px rgba(0,0,0,0.2);\n    }\n    \/* === FOND TR\u00c8S VISIBLE DERRI\u00c8RE LE TEXTE === *\/\n    #bloc-numerique-pro .card ul {\n      list-style: none;\n      padding: 2rem 1.8rem 2.2rem;\n      margin: 0;\n      flex: 1;\n      background: #FFE0CC;\n      border-radius: 0 0 28px 28px;\n      border-top: 3px solid #F97316;\n      box-shadow: inset 0 4px 12px rgba(255,122,0,0.08);\n    }\n    #bloc-numerique-pro .card ul li {\n      font-size: 1rem;\n      color: #1a1a1a;\n      line-height: 1.6;\n      padding: 0.6rem 0 0.6rem 2.4rem;\n      position: relative;\n      border-bottom: 1px solid rgba(0,0,0,0.06);\n      transition: padding-left 0.2s;\n    }\n    #bloc-numerique-pro .card ul li:last-child {\n      border-bottom: none;\n    }\n    #bloc-numerique-pro .card ul li::before {\n      content: \"\u2726\";\n      position: absolute;\n      left: 0;\n      color: #F97316;\n      font-size: 1.2rem;\n      top: 0.7rem;\n      opacity: 0.9;\n      transition: transform 0.2s;\n    }\n    #bloc-numerique-pro .card:hover ul li::before {\n      transform: scale(1.2) rotate(10deg);\n    }\n    #bloc-numerique-pro .card:hover ul li {\n      padding-left: 2.6rem;\n    }\n    @media (max-width: 480px) {\n      #bloc-numerique-pro .banner { padding: 1.2rem; flex-wrap: wrap; gap: 0.8rem; min-height: 70px; }\n      #bloc-numerique-pro .banner .icon { width: 56px; height: 56px; font-size: 2.2rem; }\n      #bloc-numerique-pro .banner h3 { font-size: 1.2rem; }\n      #bloc-numerique-pro .card ul { padding: 1.2rem; }\n      #bloc-numerique-pro .card ul li { font-size: 0.9rem; padding-left: 1.8rem; }\n    }\n<\/style>\n\n<div id=\"bloc-numerique-pro\">\n  <h2 class=\"section-title\">Ateliers num\u00e9riques<\/h2>\n  <div class=\"grid-cards\">\n    <div class=\"card\">\n      <div class=\"banner\"><span class=\"icon\">\ud83d\udda5\ufe0f<\/span><h3>Prise en main des outils<\/h3><\/div>\n      <ul>\n        <li>Apprendre \u00e0 utiliser un ordinateur, une tablette ou un smartphone<\/li>\n        <li>D\u00e9couvrir le clavier, la souris et les bases de la navigation<\/li>\n        <li>Cr\u00e9er et organiser ses fichiers et dossiers<\/li>\n        <li>Gagner en confiance dans l\u2019utilisation des outils num\u00e9riques du quotidien<\/li>\n      <\/ul>\n    <\/div>\n    <div class=\"card\">\n      <div class=\"banner\"><span class=\"icon\">\ud83d\udcc4<\/span><h3>Litt\u00e9ratie num\u00e9rique<\/h3><\/div>\n      <ul>\n        <li>R\u00e9diger un CV et une lettre de motivation<\/li>\n        <li>Utiliser une messagerie \u00e9lectronique et participer \u00e0 une visioconf\u00e9rence<\/li>\n        <li>Installer et utiliser des applications utiles<\/li>\n        <li>G\u00e9rer ses documents administratifs num\u00e9riques<\/li>\n      <\/ul>\n    <\/div>\n    <div class=\"card\">\n      <div class=\"banner\"><span class=\"icon\">\ud83d\udcc2<\/span><h3>D\u00e9marches en ligne<\/h3><\/div>\n      <ul>\n        <li>Cr\u00e9er et g\u00e9rer un compte sur les plateformes administratives (CAF, Ameli\u2026)<\/li>\n        <li>Scanner, enregistrer et envoyer des documents<\/li>\n        <li>Lire et comprendre les messages administratifs<\/li>\n        <li>Devenir autonome dans ses d\u00e9marches en ligne<\/li>\n      <\/ul>\n    <\/div>\n    <div class=\"card\">\n      <div class=\"banner\"><span class=\"icon\">\ud83d\udd12<\/span><h3>Culture num\u00e9rique &amp; autonomie<\/h3><\/div>\n      <ul>\n        <li>Naviguer en s\u00e9curit\u00e9 sur Internet<\/li>\n        <li>D\u00e9couvrir les bons usages des r\u00e9seaux sociaux<\/li>\n        <li>Prot\u00e9ger ses donn\u00e9es personnelles<\/li>\n        <li>Identifier les arnaques et d\u00e9velopper une autonomie num\u00e9rique durable<\/li>\n      <\/ul>\n    <\/div>\n  <\/div>\n<\/div>\n\n\n\n<style data-wp-block-html=\"css\">\n    @import url('https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@400;500;600;700;800&display=swap');\n    #bloc-emploi-pro {\n      padding: 4rem 1.5rem;\n      font-family: 'Inter', sans-serif;\n      max-width: 1280px;\n      margin: 0 auto;\n      background: #fbf9f7;\n    }\n    #bloc-emploi-pro .section-title {\n      font-size: clamp(3rem, 12vw, 5rem);\n      font-weight: 800;\n      letter-spacing: -0.03em;\n      margin: 0 0 2rem 0;\n      color: #0a0a0a;\n      text-shadow: 4px 4px 0 rgba(255,122,0,0.7), 2px 2px 0 rgba(255,122,0,0.3);\n      text-align: center;\n    }\n    #bloc-emploi-pro .grid-cards {\n      display: grid;\n      grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));\n      gap: 2.5rem;\n      margin-top: 1rem;\n    }\n    #bloc-emploi-pro .card {\n      background: #ffffff;\n      border-radius: 40px 40px 28px 28px;\n      box-shadow: 0 20px 60px rgba(0,0,0,0.06), 0 8px 24px rgba(0,0,0,0.03);\n      border: 1px solid rgba(0,0,0,0.04);\n      overflow: hidden;\n      transition: transform 0.5s cubic-bezier(0.23,1,0.32,1), box-shadow 0.6s ease, border-color 0.4s;\n      display: flex;\n      flex-direction: column;\n    }\n    #bloc-emploi-pro .card:hover {\n      transform: translateY(-18px) scale(1.02);\n      box-shadow: 0 40px 80px rgba(255,122,0,0.15), 0 20px 40px rgba(255,122,0,0.08);\n      border-color: rgba(255,122,0,0.25);\n    }\n    #bloc-emploi-pro .banner {\n      background: linear-gradient(145deg, #004C6E 0%, #00263b 100%);\n      padding: 2rem 1.8rem 1.4rem;\n      display: flex;\n      align-items: center;\n      gap: 1.2rem;\n      min-height: 100px;\n      position: relative;\n      overflow: hidden;\n    }\n    #bloc-emploi-pro .banner::after {\n      content: '';\n      position: absolute;\n      top: -50%;\n      right: -20%;\n      width: 200px;\n      height: 200px;\n      background: radial-gradient(circle, rgba(255,122,0,0.12), transparent 70%);\n      border-radius: 50%;\n      pointer-events: none;\n    }\n    #bloc-emploi-pro .banner .icon {\n      font-size: 3rem;\n      background: rgba(255,255,255,0.1);\n      width: 72px;\n      height: 72px;\n      border-radius: 24px;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      flex-shrink: 0;\n      color: #FF7A00;\n      backdrop-filter: blur(6px);\n      border: 1px solid rgba(255,255,255,0.08);\n      transition: transform 0.4s, background 0.3s;\n      position: relative;\n      z-index: 2;\n    }\n    #bloc-emploi-pro .card:hover .banner .icon {\n      transform: scale(1.08) rotate(-6deg);\n      background: rgba(255,255,255,0.18);\n    }\n    #bloc-emploi-pro .banner h3 {\n      font-size: 1.5rem;\n      font-weight: 700;\n      color: #ffffff;\n      margin: 0;\n      line-height: 1.3;\n      letter-spacing: -0.01em;\n      position: relative;\n      z-index: 2;\n      text-shadow: 0 2px 8px rgba(0,0,0,0.2);\n    }\n    #bloc-emploi-pro .card ul {\n      list-style: none;\n      padding: 2rem 1.8rem 2.2rem;\n      margin: 0;\n      flex: 1;\n      background: #FFE0CC;\n      border-radius: 0 0 28px 28px;\n      border-top: 3px solid #F97316;\n      box-shadow: inset 0 4px 12px rgba(255,122,0,0.08);\n    }\n    #bloc-emploi-pro .card ul li {\n      font-size: 1rem;\n      color: #1a1a1a;\n      line-height: 1.6;\n      padding: 0.6rem 0 0.6rem 2.4rem;\n      position: relative;\n      border-bottom: 1px solid rgba(0,0,0,0.06);\n      transition: padding-left 0.2s;\n    }\n    #bloc-emploi-pro .card ul li:last-child {\n      border-bottom: none;\n    }\n    #bloc-emploi-pro .card ul li::before {\n      content: \"\u2726\";\n      position: absolute;\n      left: 0;\n      color: #F97316;\n      font-size: 1.2rem;\n      top: 0.7rem;\n      opacity: 0.9;\n      transition: transform 0.2s;\n    }\n    #bloc-emploi-pro .card:hover ul li::before {\n      transform: scale(1.2) rotate(10deg);\n    }\n    #bloc-emploi-pro .card:hover ul li {\n      padding-left: 2.6rem;\n    }\n    @media (max-width: 480px) {\n      #bloc-emploi-pro .banner { padding: 1.2rem; flex-wrap: wrap; gap: 0.8rem; min-height: 70px; }\n      #bloc-emploi-pro .banner .icon { width: 56px; height: 56px; font-size: 2.2rem; }\n      #bloc-emploi-pro .banner h3 { font-size: 1.2rem; }\n      #bloc-emploi-pro .card ul { padding: 1.2rem; }\n      #bloc-emploi-pro .card ul li { font-size: 0.9rem; padding-left: 1.8rem; }\n    }\n<\/style>\n\n<div id=\"bloc-emploi-pro\">\n  <h2 class=\"section-title\">Ateliers emploi<\/h2>\n  <div class=\"grid-cards\">\n    <div class=\"card\">\n      <div class=\"banner\"><span class=\"icon\">\ud83d\udcbc<\/span><h3>Optimiser son profil LinkedIn<\/h3><\/div>\n      <ul>\n        <li>Cr\u00e9er un profil complet et professionnel<\/li>\n        <li>Optimiser son profil avec des mots-cl\u00e9s strat\u00e9giques<\/li>\n        <li>Publier des contenus pertinents<\/li>\n        <li>Comprendre le r\u00e9seau professionnel et d\u00e9velopper votre visibilit\u00e9<\/li>\n      <\/ul>\n    <\/div>\n    <div class=\"card\">\n      <div class=\"banner\"><span class=\"icon\">\ud83d\udcdd<\/span><h3>CV &amp; lettre de motivation<\/h3><\/div>\n      <ul>\n        <li>Structurer un CV efficace<\/li>\n        <li>Personnaliser sa lettre de motivation<\/li>\n        <li>Gagner en confiance dans la r\u00e9daction<\/li>\n      <\/ul>\n    <\/div>\n    <div class=\"card\">\n      <div class=\"banner\"><span class=\"icon\">\ud83d\udd0d<\/span><h3>Recherche d\u2019emploi en ligne<\/h3><\/div>\n      <ul>\n        <li>Utiliser les principaux sites (P\u00f4le emploi, Indeed, etc.)<\/li>\n        <li>Appliquer les bons filtres et mots-cl\u00e9s<\/li>\n        <li>Postuler et suivre ses candidatures<\/li>\n      <\/ul>\n    <\/div>\n    <div class=\"card\">\n      <div class=\"banner\"><span class=\"icon\">\ud83c\udfaf<\/span><h3>Pr\u00e9parer un entretien<\/h3><\/div>\n      <ul>\n        <li>Rechercher des informations sur l\u2019entreprise<\/li>\n        <li>S\u2019entra\u00eener aux questions courantes<\/li>\n        <li>Simulations et feedbacks personnalis\u00e9s<\/li>\n      <\/ul>\n    <\/div>\n  <\/div>\n<\/div>\n\n\n\n<style data-wp-block-html=\"css\">\n    @import url('https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@400;500;600;700;800&display=swap');\n    #bloc-orienter-pro {\n      padding: 4rem 1.5rem;\n      font-family: 'Inter', sans-serif;\n      max-width: 1280px;\n      margin: 0 auto;\n      background: #fbf9f7;\n    }\n    #bloc-orienter-pro .section-title {\n      font-size: clamp(3rem, 12vw, 5rem);\n      font-weight: 800;\n      letter-spacing: -0.03em;\n      margin: 0 0 2rem 0;\n      color: #0a0a0a;\n      text-shadow: 4px 4px 0 rgba(255,122,0,0.7), 2px 2px 0 rgba(255,122,0,0.3);\n      text-align: center;\n    }\n    #bloc-orienter-pro .grid-cards {\n      display: grid;\n      grid-template-columns: 1fr 1fr;\n      gap: 2.5rem;\n      margin-top: 1rem;\n    }\n    #bloc-orienter-pro .card {\n      background: #ffffff;\n      border-radius: 40px 40px 28px 28px;\n      box-shadow: 0 20px 60px rgba(0,0,0,0.06), 0 8px 24px rgba(0,0,0,0.03);\n      border: 1px solid rgba(0,0,0,0.04);\n      overflow: hidden;\n      transition: transform 0.5s cubic-bezier(0.23,1,0.32,1), box-shadow 0.6s ease, border-color 0.4s;\n      display: flex;\n      flex-direction: column;\n    }\n    #bloc-orienter-pro .card:hover {\n      transform: translateY(-18px) scale(1.02);\n      box-shadow: 0 40px 80px rgba(255,122,0,0.15), 0 20px 40px rgba(255,122,0,0.08);\n      border-color: rgba(255,122,0,0.25);\n    }\n    #bloc-orienter-pro .banner {\n      background: linear-gradient(145deg, #004C6E 0%, #00263b 100%);\n      padding: 2rem 1.8rem 1.4rem;\n      display: flex;\n      align-items: center;\n      gap: 1.2rem;\n      min-height: 100px;\n      position: relative;\n      overflow: hidden;\n    }\n    #bloc-orienter-pro .banner::after {\n      content: '';\n      position: absolute;\n      top: -50%;\n      right: -20%;\n      width: 200px;\n      height: 200px;\n      background: radial-gradient(circle, rgba(255,122,0,0.12), transparent 70%);\n      border-radius: 50%;\n      pointer-events: none;\n    }\n    #bloc-orienter-pro .banner .icon {\n      font-size: 3rem;\n      background: rgba(255,255,255,0.1);\n      width: 72px;\n      height: 72px;\n      border-radius: 24px;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      flex-shrink: 0;\n      color: #FF7A00;\n      backdrop-filter: blur(6px);\n      border: 1px solid rgba(255,255,255,0.08);\n      transition: transform 0.4s, background 0.3s;\n      position: relative;\n      z-index: 2;\n    }\n    #bloc-orienter-pro .card:hover .banner .icon {\n      transform: scale(1.08) rotate(-6deg);\n      background: rgba(255,255,255,0.18);\n    }\n    #bloc-orienter-pro .banner h3 {\n      font-size: 1.5rem;\n      font-weight: 700;\n      color: #ffffff;\n      margin: 0;\n      line-height: 1.3;\n      letter-spacing: -0.01em;\n      position: relative;\n      z-index: 2;\n      text-shadow: 0 2px 8px rgba(0,0,0,0.2);\n    }\n    #bloc-orienter-pro .body-text {\n      padding: 2rem 1.8rem 2.2rem;\n      flex: 1;\n      background: #FFE0CC;\n      border-radius: 0 0 28px 28px;\n      border-top: 3px solid #F97316;\n      box-shadow: inset 0 4px 12px rgba(255,122,0,0.08);\n    }\n    #bloc-orienter-pro .body-text p {\n      font-size: 1rem;\n      color: #1a1a1a;\n      line-height: 1.7;\n      margin: 0;\n    }\n    @media (max-width: 700px) {\n      #bloc-orienter-pro .grid-cards { grid-template-columns: 1fr; }\n    }\n    @media (max-width: 480px) {\n      #bloc-orienter-pro .banner { padding: 1.2rem; flex-wrap: wrap; gap: 0.8rem; min-height: 70px; }\n      #bloc-orienter-pro .banner .icon { width: 56px; height: 56px; font-size: 2.2rem; }\n      #bloc-orienter-pro .banner h3 { font-size: 1.2rem; }\n      #bloc-orienter-pro .body-text { padding: 1.2rem; }\n      #bloc-orienter-pro .body-text p { font-size: 0.9rem; }\n    }\n<\/style>\n\n<div id=\"bloc-orienter-pro\">\n  <h2 class=\"section-title\">Proposer ou orienter vos publics<\/h2>\n  <div class=\"grid-cards\">\n    <div class=\"card\">\n      <div class=\"banner\"><span class=\"icon\">\ud83e\udded<\/span><h3>Orienter vers Les Connect\u00e9es<\/h3><\/div>\n      <div class=\"body-text\">\n        <p>Certains b\u00e9n\u00e9ficiaires rencontrent des difficult\u00e9s avec le num\u00e9rique. Nous les aidons \u00e0 gagner en autonomie et \u00e0 reprendre confiance dans leurs usages du quotidien gr\u00e2ce \u00e0 des ateliers collectifs ou individuels adapt\u00e9s \u00e0 leur niveau.<\/p>\n      <\/div>\n    <\/div>\n    <div class=\"card\">\n      <div class=\"banner\"><span class=\"icon\">\ud83c\udfe2<\/span><h3>Ateliers dans vos locaux<\/h3><\/div>\n      <div class=\"body-text\">\n        <p>Les Connect\u00e9es peuvent intervenir directement dans vos structures. Nous co-construisons les ateliers selon vos besoins, pour rendre le num\u00e9rique accessible et rassurant pour vos publics.<\/p>\n      <\/div>\n    <\/div>\n  <\/div>\n<\/div>\n\n\n\n<style data-wp-block-html=\"css\">\n    @import url('https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@400;500;600;700;800&display=swap');\n    #bloc-benevole-pro {\n      padding: 4rem 1.5rem;\n      font-family: 'Inter', sans-serif;\n      max-width: 1280px;\n      margin: 0 auto;\n      background: #fbf9f7;\n    }\n    #bloc-benevole-pro .section-title {\n      font-size: clamp(3rem, 12vw, 5rem);\n      font-weight: 800;\n      letter-spacing: -0.03em;\n      margin: 0 0 2rem 0;\n      color: #0a0a0a;\n      text-shadow: 4px 4px 0 rgba(255,122,0,0.7), 2px 2px 0 rgba(255,122,0,0.3);\n      text-align: center;\n    }\n    #bloc-benevole-pro .grid-cards {\n      display: grid;\n      grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));\n      gap: 2.5rem;\n      margin-top: 1rem;\n    }\n    #bloc-benevole-pro .card {\n      background: #ffffff;\n      border-radius: 40px 40px 28px 28px;\n      box-shadow: 0 20px 60px rgba(0,0,0,0.06), 0 8px 24px rgba(0,0,0,0.03);\n      border: 1px solid rgba(0,0,0,0.04);\n      overflow: hidden;\n      transition: transform 0.5s cubic-bezier(0.23,1,0.32,1), box-shadow 0.6s ease, border-color 0.4s;\n      display: flex;\n      flex-direction: column;\n    }\n    #bloc-benevole-pro .card:hover {\n      transform: translateY(-18px) scale(1.02);\n      box-shadow: 0 40px 80px rgba(255,122,0,0.15), 0 20px 40px rgba(255,122,0,0.08);\n      border-color: rgba(255,122,0,0.25);\n    }\n    #bloc-benevole-pro .banner {\n      background: linear-gradient(145deg, #004C6E 0%, #00263b 100%);\n      padding: 2rem 1.8rem 1.4rem;\n      display: flex;\n      align-items: center;\n      gap: 1.2rem;\n      min-height: 100px;\n      position: relative;\n      overflow: hidden;\n    }\n    #bloc-benevole-pro .banner::after {\n      content: '';\n      position: absolute;\n      top: -50%;\n      right: -20%;\n      width: 200px;\n      height: 200px;\n      background: radial-gradient(circle, rgba(255,122,0,0.12), transparent 70%);\n      border-radius: 50%;\n      pointer-events: none;\n    }\n    #bloc-benevole-pro .banner .icon {\n      font-size: 3rem;\n      background: rgba(255,255,255,0.1);\n      width: 72px;\n      height: 72px;\n      border-radius: 24px;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      flex-shrink: 0;\n      color: #FF7A00;\n      backdrop-filter: blur(6px);\n      border: 1px solid rgba(255,255,255,0.08);\n      transition: transform 0.4s, background 0.3s;\n      position: relative;\n      z-index: 2;\n    }\n    #bloc-benevole-pro .card:hover .banner .icon {\n      transform: scale(1.08) rotate(-6deg);\n      background: rgba(255,255,255,0.18);\n    }\n    #bloc-benevole-pro .banner h3 {\n      font-size: 1.5rem;\n      font-weight: 700;\n      color: #ffffff;\n      margin: 0;\n      line-height: 1.3;\n      letter-spacing: -0.01em;\n      position: relative;\n      z-index: 2;\n      text-shadow: 0 2px 8px rgba(0,0,0,0.2);\n    }\n    #bloc-benevole-pro .card ul {\n      list-style: none;\n      padding: 2rem 1.8rem 2.2rem;\n      margin: 0;\n      flex: 1;\n      background: #FFE0CC;\n      border-radius: 0 0 28px 28px;\n      border-top: 3px solid #F97316;\n      box-shadow: inset 0 4px 12px rgba(255,122,0,0.08);\n    }\n    #bloc-benevole-pro .card ul li {\n      font-size: 1rem;\n      color: #1a1a1a;\n      line-height: 1.6;\n      padding: 0.6rem 0 0.6rem 2.4rem;\n      position: relative;\n      border-bottom: 1px solid rgba(0,0,0,0.06);\n      transition: padding-left 0.2s;\n    }\n    #bloc-benevole-pro .card ul li:last-child {\n      border-bottom: none;\n    }\n    #bloc-benevole-pro .card ul li::before {\n      content: \"\u2726\";\n      position: absolute;\n      left: 0;\n      color: #F97316;\n      font-size: 1.2rem;\n      top: 0.7rem;\n      opacity: 0.9;\n      transition: transform 0.2s;\n    }\n    #bloc-benevole-pro .card:hover ul li::before {\n      transform: scale(1.2) rotate(10deg);\n    }\n    #bloc-benevole-pro .card:hover ul li {\n      padding-left: 2.6rem;\n    }\n    @media (max-width: 480px) {\n      #bloc-benevole-pro .banner { padding: 1.2rem; flex-wrap: wrap; gap: 0.8rem; min-height: 70px; }\n      #bloc-benevole-pro .banner .icon { width: 56px; height: 56px; font-size: 2.2rem; }\n      #bloc-benevole-pro .banner h3 { font-size: 1.2rem; }\n      #bloc-benevole-pro .card ul { padding: 1.2rem; }\n      #bloc-benevole-pro .card ul li { font-size: 0.9rem; padding-left: 1.8rem; }\n    }\n\n<\/style>\n\n<div id=\"bloc-benevole-pro\">\n  <h2 class=\"section-title\">Devenir b\u00e9n\u00e9vole<\/h2>\n  <div class=\"grid-cards\">\n    <div class=\"card\">\n      <div class=\"banner\"><span class=\"icon\">\ud83e\uddd1\u200d\ud83c\udfeb<\/span><h3>Animateur(trice) d\u2019ateliers<\/h3><\/div>\n      <ul>\n        <li>Animer des ateliers en petit groupe<\/li>\n        <li>Aider \u00e0 prendre en main les outils essentiels<\/li>\n        <li>Accompagner avec bienveillance et p\u00e9dagogie<\/li>\n      <\/ul>\n    <\/div>\n    <div class=\"card\">\n      <div class=\"banner\"><span class=\"icon\">\ud83e\udd1d<\/span><h3>Agir pour l\u2019inclusion num\u00e9rique<\/h3><\/div>\n      <ul>\n        <li>Animer ou co-animer des ateliers num\u00e9riques<\/li>\n        <li>Accompagner individuellement des b\u00e9n\u00e9ficiaires<\/li>\n        <li>Participer \u00e0 la communication ou la logistique des actions<\/li>\n      <\/ul>\n    <\/div>\n  <\/div>\n<\/div>\n\n\n\n<!-- ===== BLOC 6 : CTA FINAL ===== -->\n<div class=\"cta-final-block\" id=\"ctaFinal\">\n  <div class=\"cta-inner\">\n    <div class=\"cta-badge\">Pr\u00eat \u00e0 passer \u00e0 l\u2019action ?<\/div>\n    <h2 class=\"cta-title\">Inscrivez-vous d\u00e8s <span>maintenant<\/span><\/h2>\n    <p class=\"cta-desc\">Rejoignez nos ateliers ou proposez-nous une intervention dans votre structure. L\u2019inclusion num\u00e9rique commence ici.<\/p>\n    <div class=\"cta-buttons\">\n      <a href=\"https:\/\/docs.google.com\/forms\/d\/1yndJYCWG1DQCMRuFuMQUHO-b53KOzFZeqfZjOZVTKb0\/preview\" class=\"btn-orange\" target=\"_blank\">Inscrivez-vous d\u00e8s maintenant<\/a>\n    <\/div>\n  <\/div>\n<\/div>\n\n<style>\n\/* ===== STYLES CTA FINAL ===== *\/\n@import url('https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@400;500;600;700;800&display=swap');\n\n#ctaFinal {\n  background: linear-gradient(135deg, #1E3A6E 0%, #2B4C80 100%);\n  position: relative;\n  overflow: hidden;\n  padding: 60px 32px;\n  text-align: center;\n  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;\n  margin: 40px 0 0;\n  border-radius: 28px;\n  box-shadow: 0 20px 35px -12px rgba(0, 0, 0, 0.2);\n}\n#ctaFinal::before {\n  content: '';\n  position: absolute;\n  top: -80px;\n  left: -80px;\n  width: 280px;\n  height: 280px;\n  border-radius: 50%;\n  background: rgba(232, 134, 42, 0.08);\n  pointer-events: none;\n}\n#ctaFinal::after {\n  content: '';\n  position: absolute;\n  bottom: -60px;\n  right: -60px;\n  width: 220px;\n  height: 220px;\n  border-radius: 50%;\n  background: rgba(255, 255, 255, 0.03);\n  pointer-events: none;\n}\n#ctaFinal .cta-inner {\n  position: relative;\n  z-index: 2;\n  max-width: 700px;\n  margin: 0 auto;\n}\n#ctaFinal .cta-badge {\n  display: inline-block;\n  background: rgba(232, 134, 42, 0.2);\n  backdrop-filter: blur(4px);\n  border: 1px solid rgba(232, 134, 42, 0.5);\n  color: #FDBA74;\n  font-size: 12px;\n  font-weight: 700;\n  letter-spacing: 0.1em;\n  text-transform: uppercase;\n  padding: 6px 18px;\n  border-radius: 60px;\n  margin-bottom: 20px;\n}\n#ctaFinal .cta-title {\n  font-size: 2.3rem;\n  font-weight: 800;\n  color: white;\n  line-height: 1.2;\n  margin-bottom: 16px;\n  letter-spacing: -0.02em;\n}\n#ctaFinal .cta-title span {\n  color: #F97316;\n}\n#ctaFinal .cta-desc {\n  font-size: 1rem;\n  color: rgba(255, 255, 255, 0.7);\n  max-width: 500px;\n  margin: 0 auto 30px auto;\n  line-height: 1.5;\n}\n#ctaFinal .cta-buttons {\n  display: flex;\n  justify-content: center;\n  margin-bottom: 0;\n}\n#ctaFinal .btn-orange {\n  display: inline-flex;\n  align-items: center;\n  background: #F97316;\n  color: white;\n  text-decoration: none;\n  font-weight: 700;\n  padding: 14px 32px;\n  border-radius: 60px;\n  font-size: 0.95rem;\n  transition: all 0.3s cubic-bezier(0.2, 0.9, 0.4, 1.1);\n  box-shadow: 0 6px 0 #B45309;\n  position: relative;\n  overflow: hidden;\n  letter-spacing: 0.3px;\n  cursor: pointer;\n  border: none;\n  font-family: inherit;\n}\n#ctaFinal .btn-orange::before {\n  content: '';\n  position: absolute;\n  top: 0;\n  left: -100%;\n  width: 100%;\n  height: 100%;\n  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);\n  transition: left 0.5s ease;\n}\n#ctaFinal .btn-orange:hover::before {\n  left: 100%;\n}\n#ctaFinal .btn-orange:hover {\n  transform: translateY(-3px);\n  box-shadow: 0 10px 20px -5px rgba(0,0,0,0.4), 0 4px 0 #B45309;\n  background: #ff8820;\n}\n#ctaFinal .btn-orange:active {\n  transform: translateY(2px);\n  box-shadow: 0 4px 0 #B45309;\n}\n@media (max-width: 600px) {\n  #ctaFinal .cta-title { font-size: 1.8rem; }\n  #ctaFinal .btn-orange { padding: 12px 24px; font-size: 0.9rem; }\n}\n<\/style>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Toutes Nos formations Des ateliers num\u00e9riques pour tous les niveaux, en pr\u00e9sentiel ou dans vos locaux. S\u2019inscrire \u00e0 un atelier \u2192 Ateliers num\u00e9riques \ud83d\udda5\ufe0f Prise en main des outils Apprendre \u00e0 utiliser un ordinateur, une tablette ou un smartphone D\u00e9couvrir le clavier, la souris et les bases de la navigation Cr\u00e9er et organiser ses fichiers&#8230;<\/p>\n","protected":false},"author":4,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_kadence_starter_templates_imported_post":false,"_kad_post_transparent":"","_kad_post_title":"","_kad_post_layout":"","_kad_post_sidebar_id":"","_kad_post_content_style":"","_kad_post_vertical_padding":"","_kad_post_feature":"","_kad_post_feature_position":"","_kad_post_header":false,"_kad_post_footer":false,"_kad_post_classname":"","footnotes":""},"class_list":["post-4949","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/lesconnectees.org\/index.php\/wp-json\/wp\/v2\/pages\/4949","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/lesconnectees.org\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/lesconnectees.org\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/lesconnectees.org\/index.php\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/lesconnectees.org\/index.php\/wp-json\/wp\/v2\/comments?post=4949"}],"version-history":[{"count":7,"href":"https:\/\/lesconnectees.org\/index.php\/wp-json\/wp\/v2\/pages\/4949\/revisions"}],"predecessor-version":[{"id":5003,"href":"https:\/\/lesconnectees.org\/index.php\/wp-json\/wp\/v2\/pages\/4949\/revisions\/5003"}],"wp:attachment":[{"href":"https:\/\/lesconnectees.org\/index.php\/wp-json\/wp\/v2\/media?parent=4949"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}