{"id":661,"date":"2020-01-14T21:37:17","date_gmt":"2020-01-14T20:37:17","guid":{"rendered":"http:\/\/vps485761.ovh.net\/?page_id=661"},"modified":"2026-11-09T12:45:05","modified_gmt":"2026-11-09T11:45:05","slug":"adherer-au-club","status":"publish","type":"page","link":"https:\/\/www.clubalpine.net\/index.php\/adherer-au-club\/","title":{"rendered":"ADH\u00c9RER AU CLUB"},"content":{"rendered":"\n<!--\n==================================================================\n ASAN \u2014 PAGE ADH\u00c9SION \u2014 style de l'accueil\n \u00c0 coller dans le bloc \u00ab HTML personnalis\u00e9 \u00bb de la page Adh\u00e9sion,\n EN REMPLACEMENT de tout l'ancien contenu.\n Le formulaire AssoConnect (iframe + script) est conserv\u00e9 \u00e0 l'identique.\n Le style ne s'applique qu'\u00e0 cette page (s\u00e9lecteur body:has(.axa)).\n==================================================================\n-->\n<style>\n\/* ================================================================\n   1. PAGE ET MENU ASHE (uniquement la page qui contient ce bloc)\n   ================================================================ *\/\nbody:has(.axa),\nbody:has(.axa) #page-wrap,\nbody:has(.axa) #page-content,\nbody:has(.axa) .page-content,\nbody:has(.axa) .main-container,\nbody:has(.axa) .main-content-container,\nbody:has(.axa) .main-content,\nbody:has(.axa) #main-content,\nbody:has(.axa) .post-content,\nbody:has(.axa) .entry-content,\nbody:has(.axa) article.post,\nbody:has(.axa) article.page {\n  background: #000 !important;\n}\nbody:has(.axa) { overflow-x: clip; }\n\nbody:has(.axa) .post-header,\nbody:has(.axa) .entry-header,\nbody:has(.axa) h1.entry-title,\nbody:has(.axa) .post-title,\nbody:has(.axa) .page-title,\nbody:has(.axa) .sidebar-right,\nbody:has(.axa) #sidebar-right {\n  display: none !important;\n}\n\nbody:has(.axa) .main-container,\nbody:has(.axa) .main-content-container,\nbody:has(.axa) .main-content,\nbody:has(.axa) #main-content,\nbody:has(.axa) .post-content,\nbody:has(.axa) .entry-content {\n  width: 100% !important;\n  max-width: 100% !important;\n  float: none !important;\n  margin-left: auto !important;\n  margin-right: auto !important;\n  padding-top: 0 !important;\n  overflow: visible !important;\n  box-sizing: border-box !important;\n}\n\n\/* Menu noir, textes et logo blancs *\/\nbody:has(.axa) #main-nav,\nbody:has(.axa) .main-nav {\n  background: #000 !important;\n  box-shadow: none !important;\n  border: none !important;\n}\nbody:has(.axa) #main-nav .main-menu > li > a,\nbody:has(.axa) #main-nav #main-menu > li > a,\nbody:has(.axa) #main-nav .nav-search,\nbody:has(.axa) #main-nav .nav-search i,\nbody:has(.axa) #main-nav .open-menu,\nbody:has(.axa) #main-nav .sidebar-toggle,\nbody:has(.axa) #main-nav .sidebar-toggle i,\nbody:has(.axa) .main-nav i,\nbody:has(.axa) .main-nav svg,\nbody:has(.axa) .main-nav .mobile-menu-btn {\n  color: #fff !important;\n}\nbody:has(.axa) #main-nav .main-menu > li > a,\nbody:has(.axa) #main-nav #main-menu > li > a {\n  font-family: 'Archivo', Arial, sans-serif !important;\n}\nbody:has(.axa) #main-nav .main-menu > li > a:hover,\nbody:has(.axa) #main-nav .main-menu > li.current-menu-item > a,\nbody:has(.axa) #main-nav .main-menu > li.current_page_item > a {\n  color: #9cc2ff !important;\n}\nbody:has(.axa) #main-nav .sub-menu,\nbody:has(.axa) #main-nav .children { background: #fff !important; }\nbody:has(.axa) #main-nav .sub-menu a,\nbody:has(.axa) #main-nav .children a { color: #0c1a34 !important; }\nbody:has(.axa) #main-nav .mini-logo {\n  background: url(\"https:\/\/www.clubalpine.net\/wp-content\/uploads\/2026\/11\/Logo-lettre-blanche.png\") center \/ contain no-repeat !important;\n  width: 205px !important;\n  min-width: 205px !important;\n  min-height: 38px !important;\n}\nbody:has(.axa) #main-nav .mini-logo img { opacity: 0 !important; }\n@media (max-width: 767px) {\n  body:has(.axa) #main-nav .mini-logo { width: 155px !important; min-width: 155px !important; }\n}\n\n\/* ================================================================\n   2. BASE\n   ================================================================ *\/\n.axa {\n  --blue: #1e6fd9;\n  --red: #e2231a;\n  position: relative;\n  left: 50%;\n  transform: translateX(-50%);\n  width: min(1248px, calc(100vw - 48px));\n  padding: 0 0 100px;\n  color: #fff;\n  font-family: 'Archivo', Arial, sans-serif !important;\n  font-size: 16px;\n  line-height: 1.55;\n}\n.axa *, .axa *::before, .axa *::after { box-sizing: border-box; }\n.axa h1, .axa h2, .axa p, .axa a, .axa span {\n  font-family: 'Archivo', Arial, sans-serif !important;\n}\n.axa h1, .axa h2 {\n  color: #fff !important;\n  font-style: normal !important;\n  letter-spacing: -.02em !important;\n  text-transform: none !important;\n  margin-top: 0;\n}\n.axa p { margin: 0; }\n.axa a { text-decoration: none !important; box-shadow: none !important; }\n\n.axa h3 {\n  font-family: 'Archivo', Arial, sans-serif !important;\n  color: #fff !important;\n  font-style: normal !important;\n  text-transform: none !important;\n  letter-spacing: -.01em !important;\n}\n\n\/* ================================================================\n   3. EN-T\u00caTE\n   ================================================================ *\/\n.axa-hero {\n  position: relative;\n  left: 50%;\n  transform: translateX(-50%);\n  width: 100vw;\n  min-height: 420px;\n  display: flex;\n  align-items: flex-end;\n  overflow: hidden;\n  isolation: isolate;\n  background: #000;\n}\n.axa-hero::before {\n  content: \"\";\n  position: absolute;\n  inset: 0;\n  z-index: -1;\n  background: radial-gradient(ellipse at 85% 0%, rgba(30,111,217,.30) 0%, rgba(0,0,0,0) 55%);\n}\n.axa-hero-in {\n  width: min(1248px, calc(100% - 48px));\n  margin: 0 auto;\n  padding: 90px 0 60px;\n  display: flex;\n  flex-wrap: wrap;\n  align-items: flex-end;\n  justify-content: space-between;\n  gap: 32px;\n}\n.axa-kick-top { margin-bottom: 14px !important; font-size: 15px; font-weight: 600; color: #d6d6d6; }\n.axa .axa-hero h1 {\n  margin: 0 !important;\n  font-size: clamp(48px, 7vw, 96px) !important;\n  font-weight: 900 !important;\n  line-height: .95 !important;\n}\n.axa-hero h1::after {\n  content: \"\";\n  display: block;\n  width: 130px;\n  height: 5px;\n  margin-top: 24px;\n  background: linear-gradient(90deg, var(--blue) 0 46%, transparent 46% 54%, var(--red) 54% 100%);\n}\n.axa-lead { max-width: 580px; margin-top: 24px !important; font-size: 18px; color: #e0e0e0; }\n.axa-lead b { color: #fff; }\n.axa-hero-side { display: flex; flex-direction: column; align-items: flex-end; gap: 16px; }\n.axa-year {\n  font-size: 88px;\n  font-weight: 900;\n  line-height: .9;\n  letter-spacing: -.03em;\n  color: transparent;\n  -webkit-text-stroke: 2px #fff;\n}\n.axa .axa-btn {\n  display: inline-block;\n  padding: 14px 22px;\n  border-radius: 3px;\n  background: #fff;\n  color: #000 !important;\n  font-size: 15px;\n  font-weight: 700;\n  transition: background .25s, color .25s;\n}\n.axa .axa-btn:hover { background: var(--blue); color: #fff !important; }\n\n\/* ================================================================\n   4. POURQUOI ADH\u00c9RER\n   ================================================================ *\/\n.axa-why {\n  display: grid;\n  grid-template-columns: repeat(3, minmax(0, 1fr));\n  border-top: 1px solid #262626;\n  border-bottom: 1px solid #262626;\n}\n.axa-why > div { padding: 36px 32px; border-left: 1px solid #262626; }\n.axa-why > div:first-child { border-left: none; padding-left: 0; }\n.axa-why b { display: block; font-size: 15px; font-weight: 700; color: #9cc2ff; }\n.axa .axa-why h3 { margin: 8px 0 10px !important; font-size: 26px !important; font-weight: 800 !important; line-height: 1.15 !important; }\n.axa-why p { font-size: 16px; color: #b5b5b5; }\n\n\/* ================================================================\n   5. FORMULAIRE\n   ================================================================ *\/\n.axa-form-head {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: flex-end;\n  justify-content: space-between;\n  gap: 24px;\n  margin-top: 96px;\n  margin-bottom: 28px;\n}\n.axa .axa-form-head h2 {\n  margin: 0 !important;\n  font-size: clamp(34px, 4vw, 52px) !important;\n  font-weight: 900 !important;\n  line-height: 1.05 !important;\n}\n.axa-form-head p { margin-top: 12px !important; font-size: 17px; color: #b5b5b5; }\n.axa .axa-steps { display: flex; flex-wrap: wrap; gap: 8px; list-style: none !important; margin: 0 !important; padding: 0 !important; }\n.axa .axa-steps li {\n  list-style: none !important;\n  margin: 0 !important;\n  padding: 8px 14px;\n  border: 1px solid #333;\n  border-radius: 3px;\n  background: #0d0d0d;\n  font-size: 14px;\n  font-weight: 600;\n  color: #e0e0e0;\n}\n.axa .axa-steps li::before, .axa .axa-steps li::marker { content: none !important; display: none !important; }\n.axa-steps li span { color: #9cc2ff; font-weight: 800; margin-right: 6px; }\n\n.axa-form {\n  border-top: 4px solid var(--blue);\n  background: #fff;\n}\n.axa-form-in { padding: 24px; }\n.axa-form-in iframe {\n  display: block;\n  width: 100%;\n  min-height: 650px;\n  border: 0;\n}\n.axa-help { margin-top: 18px !important; font-size: 15px; color: #8f8f8f; }\n.axa-help a { color: #9cc2ff !important; font-weight: 600; }\n\n\/* ================================================================\n   6. TABLETTE ET MOBILE\n   ================================================================ *\/\n@media (max-width: 860px) {\n  .axa-why { grid-template-columns: 1fr; }\n  .axa-why > div { border-left: none; padding: 28px 0; border-top: 1px solid #262626; }\n  .axa-why > div:first-child { border-top: none; }\n}\n@media (max-width: 640px) {\n  .axa { width: calc(100vw - 32px); padding-bottom: 64px; }\n  .axa-hero { min-height: 400px; }\n  .axa-hero-in { width: calc(100% - 32px); padding: 70px 0 40px; }\n  .axa-hero-side { align-items: flex-start; }\n  .axa-year { font-size: 64px; }\n  .axa-lead { font-size: 17px; }\n  .axa .axa-why h3 { font-size: 23px !important; }\n  .axa-form-head { margin-top: 64px; }\n  .axa-form-in { padding: 6px; }\n}\n<\/style>\n\n<div class=\"axa\">\n\n  <!-- ================= EN-T\u00caTE ================= -->\n  <header class=\"axa-hero\">\n    <div class=\"axa-hero-in\">\n      <div>\n        <p class=\"axa-kick-top\">Rejoignez le club<\/p>\n        <h1>Adh\u00e9rer \u00e0 l\u2019ASAN<\/h1>\n        <p class=\"axa-lead\"><b>Partageons ensemble la passion Alpine !<\/b> Sorties, rencontres et convivialit\u00e9 : rejoignez les passionn\u00e9s d\u2019Alpine du Nord.<\/p>\n      <\/div>\n      <div class=\"axa-hero-side\">\n        <span class=\"axa-year\">2026<\/span>\n        <a class=\"axa-btn\" href=\"#axa-bulletin\">Remplir le bulletin \u2192<\/a>\n      <\/div>\n    <\/div>\n  <\/header>\n\n  <!-- ================= POURQUOI ADH\u00c9RER ================= -->\n  <div class=\"axa-why\">\n    <div>\n      <b>01<\/b>\n      <h3>Des sorties<\/h3>\n      <p>Balades, concentrations et rassemblements tout au long de l\u2019ann\u00e9e.<\/p>\n    <\/div>\n    <div>\n      <b>02<\/b>\n      <h3>Des rencontres<\/h3>\n      <p>\u00c9changez avec des passionn\u00e9s d\u2019Alpine de toute la r\u00e9gion.<\/p>\n    <\/div>\n    <div>\n      <b>03<\/b>\n      <h3>De la convivialit\u00e9<\/h3>\n      <p>Des moments partag\u00e9s autour d\u2019une passion commune.<\/p>\n    <\/div>\n  <\/div>\n\n  <!-- ================= FORMULAIRE ================= -->\n  <div class=\"axa-form-head\" id=\"axa-bulletin\">\n    <div>\n      <h2>Bulletin d\u2019adh\u00e9sion 2026<\/h2>\n      <p>\u00c0 remplir en ligne, puis envoyez votre paiement.<\/p>\n    <\/div>\n    <ol class=\"axa-steps\">\n      <li><span>1<\/span>Je remplis le bulletin<\/li>\n      <li><span>2<\/span>J\u2019envoie mon paiement<\/li>\n      <li><span>3<\/span>Bienvenue au club !<\/li>\n    <\/ol>\n  <\/div>\n\n  <div class=\"axa-form\">\n    <div class=\"axa-form-in\">\n      <!-- Code AssoConnect d'origine (seul le d\u00e9filement automatique \u00e0 l'ouverture a \u00e9t\u00e9 retir\u00e9) -->\n      <iframe id=\"iframe_assoconnect\" src=\"https:\/\/association-des-alpine-du-nord.assoconnect.com\/collect\/description\/640496-h-association-sportive-des-alpine-du-nord-bulletin-d-adhesion-2026?iframe=1\" allow=\"payment\" width=\"100%\" style=\"overflow: hidden; border: 0; max-height: none;\" scrolling=\"no\" onload=\"if(this.dataset.vu){window.location.href='#iframe_assoconnect'}else{this.dataset.vu='1'}\"><\/iframe><script>window.addEventListener(\"message\", function(event) {if(event.data.action === \"iframe.height\" && (event.origin === \"https:\/\/association-des-alpine-du-nord.assoconnect.com\" || event.origin === \"https:\/\/pay.assoconnect.com\")){document.getElementById(\"iframe_assoconnect\").height = event.data.height;}});<\/script><style>#iframe_assoconnect{border: 0}<\/style>\n    <\/div>\n  <\/div>\n\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Rejoignez le club Adh\u00e9rer \u00e0 l\u2019ASAN Partageons ensemble la passion Alpine ! Sorties, rencontres et convivialit\u00e9 : rejoignez les passionn\u00e9s d\u2019Alpine du Nord. 2026 Remplir le bulletin \u2192 01 Des sorties Balades, concentrations et rassemblements tout au long de l\u2019ann\u00e9e. 02 Des rencontres \u00c9changez avec des passionn\u00e9s d\u2019Alpine de toute la r\u00e9gion. 03 De la convivialit\u00e9 Des moments partag\u00e9s autour d\u2019une passion commune. Bulletin d\u2019adh\u00e9sion 2026 \u00c0 remplir en ligne, puis envoyez votre paiement. 1Je remplis le bulletin 2J\u2019envoie mon paiement 3Bienvenue au club !<\/p>\n","protected":false},"author":3,"featured_media":0,"parent":0,"menu_order":2,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"_EventAllDay":false,"_EventTimezone":"","_EventStartDate":"","_EventEndDate":"","_EventStartDateUTC":"","_EventEndDateUTC":"","_EventShowMap":false,"_EventShowMapLink":false,"_EventURL":"","_EventCost":"","_EventCostDescription":"","_EventCurrencySymbol":"","_EventCurrencyCode":"","_EventCurrencyPosition":"","_EventDateTimeSeparator":"","_EventTimeRangeSeparator":"","_EventOrganizerID":[],"_EventVenueID":[],"_OrganizerEmail":"","_OrganizerPhone":"","_OrganizerWebsite":"","_VenueAddress":"","_VenueCity":"","_VenueCountry":"","_VenueProvince":"","_VenueState":"","_VenueZip":"","_VenuePhone":"","_VenueURL":"","_VenueStateProvince":"","_VenueLat":"","_VenueLng":"","_VenueShowMap":false,"_VenueShowMapLink":false,"footnotes":""},"class_list":["post-661","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.clubalpine.net\/index.php\/wp-json\/wp\/v2\/pages\/661","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.clubalpine.net\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.clubalpine.net\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.clubalpine.net\/index.php\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/www.clubalpine.net\/index.php\/wp-json\/wp\/v2\/comments?post=661"}],"version-history":[{"count":42,"href":"https:\/\/www.clubalpine.net\/index.php\/wp-json\/wp\/v2\/pages\/661\/revisions"}],"predecessor-version":[{"id":3691,"href":"https:\/\/www.clubalpine.net\/index.php\/wp-json\/wp\/v2\/pages\/661\/revisions\/3691"}],"wp:attachment":[{"href":"https:\/\/www.clubalpine.net\/index.php\/wp-json\/wp\/v2\/media?parent=661"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}