{"id":1980,"date":"2026-08-03T12:08:23","date_gmt":"2026-08-03T12:08:23","guid":{"rendered":"https:\/\/ose-echange.org\/altis-the-compass-for-everyone\/"},"modified":"2026-08-04T21:53:42","modified_gmt":"2026-08-04T21:53:42","slug":"altis-la-boussole-pour-tous","status":"publish","type":"page","link":"https:\/\/ose-echange.org\/en\/library\/3-diagrams-to-understand-everything\/altis-la-boussole-pour-tous\/","title":{"rendered":"ALTIS, the compass for everyone"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"1980\" class=\"elementor elementor-1980 elementor-1930\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-9bab386 e-flex e-con-boxed e-con e-parent\" data-id=\"9bab386\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-08debe6 elementor-widget elementor-widget-html\" data-id=\"08debe6\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- ============================================================\r\n     PAGE: ALTIS - THE SAME COMPASS FOR EVERYONE (EN)\r\n     OSE Website (Olympic Student Exchange) - ose-echange.org\r\n     Body content only (no header, no footer)\r\n     CSS scoping prefix: .oaltis-\r\n============================================================ -->\r\n\r\n<section class=\"oaltis-page\">\r\n\r\n  <!-- ===================== HERO \/ INTRO ===================== -->\r\n  <section class=\"oaltis-hero\">\r\n    <div class=\"oaltis-hero-inner\">\r\n      <h1 class=\"oaltis-title\">Altis: the shared compass<br>of the entire OSE community<\/h1>\r\n      <p class=\"oaltis-subtitle\">\r\n        The ALTIS compass isn't just for young people,\r\n        it is <span class=\"oaltis-accent\">the reference point that guides and supports<\/span> every member of OSE.\r\n      <\/p>\r\n    <\/div>\r\n  <\/section>\r\n\r\n  <!-- ===================== RADIAL DIAGRAM ===================== -->\r\n  <section class=\"oaltis-diagram-section\">\r\n    <div class=\"oaltis-diagram-wrap\">\r\n\r\n      <!-- Connecting lines (pure SVG, no text inside) -->\r\n      <svg class=\"oaltis-lines-svg\" viewBox=\"0 0 1000 1080\" preserveAspectRatio=\"xMidYMid meet\" aria-hidden=\"true\">\r\n        <defs>\r\n          <linearGradient id=\"oaltisLineGrad\" x1=\"0%\" y1=\"0%\" x2=\"100%\" y2=\"100%\">\r\n            <stop offset=\"0%\" stop-color=\"#C8862B\"\/>\r\n            <stop offset=\"100%\" stop-color=\"#0B2748\"\/>\r\n          <\/linearGradient>\r\n          <linearGradient id=\"oaltisTrunkGrad\" x1=\"0%\" y1=\"0%\" x2=\"100%\" y2=\"0%\">\r\n            <stop offset=\"0%\" stop-color=\"#7A5230\"\/>\r\n            <stop offset=\"50%\" stop-color=\"#9C6B3D\"\/>\r\n            <stop offset=\"100%\" stop-color=\"#6B4423\"\/>\r\n          <\/linearGradient>\r\n        <\/defs>\r\n\r\n        <!-- OSE WORLD (top) -->\r\n        <path d=\"M500,430 C500,340 500,250 500,175\" stroke=\"url(#oaltisLineGrad)\" stroke-width=\"4\" fill=\"none\" stroke-linecap=\"round\"\/>\r\n        <!-- OSE COUNTRY (top-left) -->\r\n        <path d=\"M450,455 C360,410 275,375 205,345\" stroke=\"url(#oaltisLineGrad)\" stroke-width=\"4\" fill=\"none\" stroke-linecap=\"round\"\/>\r\n        <!-- THE CLUB (top-right) -->\r\n        <path d=\"M550,455 C640,410 725,375 795,345\" stroke=\"url(#oaltisLineGrad)\" stroke-width=\"4\" fill=\"none\" stroke-linecap=\"round\"\/>\r\n        <!-- THE FAMILY (bottom-left) -->\r\n        <path d=\"M450,495 C360,545 275,585 205,620\" stroke=\"url(#oaltisLineGrad)\" stroke-width=\"4\" fill=\"none\" stroke-linecap=\"round\"\/>\r\n        <!-- THE MENTOR (bottom-right) -->\r\n        <path d=\"M550,495 C640,545 725,585 795,620\" stroke=\"url(#oaltisLineGrad)\" stroke-width=\"4\" fill=\"none\" stroke-linecap=\"round\"\/>\r\n\r\n        <!-- Small junction dots -->\r\n        <circle cx=\"500\" cy=\"175\" r=\"6\" fill=\"#0B2748\"\/>\r\n        <circle cx=\"205\" cy=\"345\" r=\"6\" fill=\"#2F6B45\"\/>\r\n        <circle cx=\"795\" cy=\"345\" r=\"6\" fill=\"#2E5AA8\"\/>\r\n        <circle cx=\"205\" cy=\"620\" r=\"6\" fill=\"#FF8C00\"\/>\r\n        <circle cx=\"795\" cy=\"620\" r=\"6\" fill=\"#0E7A85\"\/>\r\n\r\n        <!-- THE AMBASSADOR (bottom) \u2014 single wooden post, rooted down to the image -->\r\n        <path d=\"M491,470 C489,560 487,650 484,750 L516,750 C513,650 511,560 509,470 Z\"\r\n              fill=\"url(#oaltisTrunkGrad)\" stroke=\"#5A3A1F\" stroke-width=\"1.5\"\/>\r\n        <path d=\"M485,555 L515,555\" stroke=\"#5A3A1F\" stroke-width=\"4\" stroke-linecap=\"round\"\/>\r\n        <path d=\"M484,640 L516,640\" stroke=\"#5A3A1F\" stroke-width=\"4\" stroke-linecap=\"round\"\/>\r\n      <\/svg>\r\n\r\n      <!-- Central ALTIS compass -->\r\n      <div class=\"oaltis-center\">\r\n        <div class=\"oaltis-compass\">\r\n          <svg class=\"oaltis-compass-star\" viewBox=\"0 0 200 200\" aria-hidden=\"true\">\r\n            <!-- Outer navy ring -->\r\n            <circle cx=\"100\" cy=\"100\" r=\"96\" fill=\"#0B2748\" stroke=\"#C8862B\" stroke-width=\"2.5\"\/>\r\n            <!-- Inner cream disc -->\r\n            <circle cx=\"100\" cy=\"100\" r=\"66\" fill=\"#FBF9F4\" stroke=\"#C8862B\" stroke-width=\"2\"\/>\r\n            <!-- Realistic compass rose: 4 large points (gold) + 4 small points (navy) -->\r\n            <polygon points=\"100,20 108,92 100,100 92,92\" fill=\"#C8862B\"\/>\r\n            <polygon points=\"100,180 108,108 100,100 92,108\" fill=\"#C8862B\"\/>\r\n            <polygon points=\"20,100 92,92 100,100 92,108\" fill=\"#0B2748\"\/>\r\n            <polygon points=\"180,100 108,92 100,100 108,108\" fill=\"#0B2748\"\/>\r\n            <polygon points=\"43,43 95,90 100,100 90,95\" fill=\"#C8862B\" opacity=\"0.55\"\/>\r\n            <polygon points=\"157,157 105,110 100,100 110,105\" fill=\"#C8862B\" opacity=\"0.55\"\/>\r\n            <polygon points=\"157,43 110,95 100,100 105,90\" fill=\"#0B2748\" opacity=\"0.55\"\/>\r\n            <polygon points=\"43,157 95,105 100,100 90,110\" fill=\"#0B2748\" opacity=\"0.55\"\/>\r\n            <!-- Central hub -->\r\n            <circle cx=\"100\" cy=\"100\" r=\"9\" fill=\"#0B2748\"\/>\r\n            <circle cx=\"100\" cy=\"100\" r=\"4\" fill=\"#C8862B\"\/>\r\n          <\/svg>\r\n\r\n          <!-- The 4 ring words: same badge style (navy background, gold border)\r\n               for Alignment\/Service (top\/bottom) and Transformation\/Integrity (left\/right),\r\n               slightly protruding from the circle, horizontal and fully legible text -->\r\n          <span class=\"oaltis-compass-label oaltis-compass-label--top\">Alignment<\/span>\r\n          <span class=\"oaltis-compass-label oaltis-compass-label--bottom\">Service<\/span>\r\n          <span class=\"oaltis-compass-label oaltis-compass-label--left\">Transformation<\/span>\r\n          <span class=\"oaltis-compass-label oaltis-compass-label--right\">Integrity<\/span>\r\n\r\n          <span class=\"oaltis-compass-name\">ALTIS<\/span>\r\n        <\/div>\r\n      <\/div>\r\n\r\n      <!-- Node: OSE WORLD -->\r\n      <div class=\"oaltis-node oaltis-node--top\">\r\n        <div class=\"oaltis-node-photo oaltis-node-photo--contain\">\r\n          <!-- REPLACE THIS LINK HERE WITH YOUR OSE PHOTO -->\r\n          <img decoding=\"async\" src=\"https:\/\/ose-echange.org\/wp-content\/uploads\/2026\/08\/ose-monde-removebg-preview.png\" alt=\"Symbolic view of the world representing OSE, the international student sports exchange network\">\r\n        <\/div>\r\n        <h3 class=\"oaltis-node-title oaltis-node-title--navy\">OSE World<\/h3>\r\n        <p class=\"oaltis-node-text\">It inspires,<br>it unites,<br>it opens horizons.<\/p>\r\n      <\/div>\r\n\r\n      <!-- Node: OSE COUNTRY -->\r\n      <div class=\"oaltis-node oaltis-node--left\">\r\n        <div class=\"oaltis-node-photo\">\r\n          <!-- REPLACE THIS LINK HERE WITH YOUR OSE PHOTO -->\r\n          <img decoding=\"async\" src=\"https:\/\/ose-echange.org\/wp-content\/uploads\/2026\/08\/ose-pays.jpg\" alt=\"Country path with an OSE signpost, symbol of the program's partner countries\">\r\n        <\/div>\r\n        <h3 class=\"oaltis-node-title oaltis-node-title--green\">OSE Country<\/h3>\r\n        <p class=\"oaltis-node-text\">It structures,<br>it connects,<br>it expands.<\/p>\r\n      <\/div>\r\n\r\n      <!-- Node: THE CLUB -->\r\n      <div class=\"oaltis-node oaltis-node--right\">\r\n        <div class=\"oaltis-node-photo\">\r\n          <!-- REPLACE THIS LINK HERE WITH YOUR OSE PHOTO -->\r\n          <img decoding=\"async\" src=\"https:\/\/ose-echange.org\/wp-content\/uploads\/2026\/08\/le-club.jpg\" alt=\"OSE partner sports club welcoming young Olympic ambassadors\">\r\n        <\/div>\r\n        <h3 class=\"oaltis-node-title oaltis-node-title--blue\">The Club<\/h3>\r\n        <p class=\"oaltis-node-text\">It welcomes,<br>it trains,<br>it helps them grow.<\/p>\r\n      <\/div>\r\n\r\n      <!-- Node: THE FAMILY -->\r\n      <div class=\"oaltis-node oaltis-node--bl\">\r\n        <div class=\"oaltis-node-photo oaltis-node-photo--face-top\">\r\n          <!-- REPLACE THIS LINK HERE WITH YOUR OSE PHOTO -->\r\n          <img decoding=\"async\" src=\"https:\/\/ose-echange.org\/wp-content\/uploads\/2026\/08\/la-famille.jpg\" alt=\"Smiling OSE host family, an essential support for the ambassador during their exchange\">\r\n        <\/div>\r\n        <h3 class=\"oaltis-node-title oaltis-node-title--orange\">The Family<\/h3>\r\n        <p class=\"oaltis-node-text\">She loves,<br>she supports,<br>she encourages.<\/p>\r\n      <\/div>\r\n\r\n      <!-- Node: THE MENTOR -->\r\n      <div class=\"oaltis-node oaltis-node--br\">\r\n        <div class=\"oaltis-node-photo oaltis-node-photo--face-top\">\r\n          <!-- REPLACE THIS LINK HERE WITH YOUR OSE PHOTO -->\r\n          <img decoding=\"async\" src=\"https:\/\/ose-echange.org\/wp-content\/uploads\/2026\/08\/le-referent.jpg\" alt=\"OSE mentor guiding and supporting a young ambassador along their journey\">\r\n        <\/div>\r\n        <h3 class=\"oaltis-node-title oaltis-node-title--teal\">The Mentor<\/h3>\r\n        <p class=\"oaltis-node-text\">He guides,<br>he listens,<br>he helps discern.<\/p>\r\n      <\/div>\r\n\r\n      <!-- Node: THE AMBASSADOR (rooted at the foot of the post) -->\r\n      <div class=\"oaltis-node oaltis-node--bottom\">\r\n        <div class=\"oaltis-node-photo oaltis-node-photo--bottom oaltis-node-photo--face-mid\">\r\n          <!-- REPLACE THIS LINK HERE WITH YOUR OSE PHOTO -->\r\n          <img decoding=\"async\" src=\"https:\/\/ose-echange.org\/wp-content\/uploads\/2026\/08\/ambassadeur.jpg\" alt=\"Young sapling symbolising the growth of the OSE ambassador, between pushing their limits and opening up to others\">\r\n        <\/div>\r\n        <h3 class=\"oaltis-node-title oaltis-node-title--green\">The Ambassador<\/h3>\r\n        <p class=\"oaltis-node-text\">He pushes his limits,<br>he knows himself,<br>he opens up to others.<\/p>\r\n      <\/div>\r\n\r\n    <\/div>\r\n  <\/section>\r\n\r\n  <!-- ===================== CALLOUT + CLOSING IMAGE ===================== -->\r\n  <section class=\"oaltis-callout-section\">\r\n    <div class=\"oaltis-callout-grid\">\r\n\r\n      <div class=\"oaltis-callout-box\">\r\n        <div class=\"oaltis-callout-icon\">\r\n          <svg viewBox=\"0 0 100 100\" aria-hidden=\"true\">\r\n            <circle cx=\"50\" cy=\"50\" r=\"46\" fill=\"#0B2748\"\/>\r\n            <circle cx=\"50\" cy=\"50\" r=\"34\" fill=\"none\" stroke=\"#C8862B\" stroke-width=\"2\"\/>\r\n            <polygon points=\"50,20 56,50 80,50 56,56 50,80 44,56 20,50 44,44\" fill=\"#FBF9F4\"\/>\r\n          <\/svg>\r\n        <\/div>\r\n        <p class=\"oaltis-callout-lead\">\r\n          All different, all complementary, all connected by the same compass&nbsp;: <span class=\"oaltis-accent-navy\">ALTIS<\/span>.\r\n        <\/p>\r\n        <p class=\"oaltis-callout-text\">\r\n          It gives us direction, it nurtures growth, it unites us around a shared mission.\r\n        <\/p>\r\n      <\/div>\r\n\r\n      <div class=\"oaltis-callout-image\">\r\n        <div class=\"oaltis-callout-image-photo\">\r\n          <!-- REPLACE THIS LINK HERE WITH YOUR OSE PHOTO -->\r\n          <img decoding=\"async\" src=\"https:\/\/ose-echange.org\/wp-content\/uploads\/2026\/08\/image-ambassadeur.jpg\" alt=\"A lone tree facing the mountains, symbol of OSE's worldwide community of Olympic ambassadors\">\r\n        <\/div>\r\n        <p class=\"oaltis-callout-caption\">\r\n          Together, we shape <span class=\"oaltis-accent\">Olympic ambassadors<\/span> and citizens of the world.\r\n        <\/p>\r\n      <\/div>\r\n\r\n    <\/div>\r\n  <\/section>\r\n\r\n  <!-- ===================== SIGNATURE \/ BASELINE ===================== -->\r\n  <section class=\"oaltis-baseline-section\">\r\n    <p class=\"oaltis-baseline-words\">\r\n      Push your limits <span class=\"oaltis-dot\">\u2022<\/span> Know yourself <span class=\"oaltis-dot\">\u2022<\/span> Open up to others\r\n    <\/p>\r\n    <div class=\"oaltis-baseline-rule\">\r\n      <span class=\"oaltis-rule\"><\/span>\r\n      <span class=\"oaltis-baseline-strong\">Dare the future with Altis<\/span>\r\n      <span class=\"oaltis-rule\"><\/span>\r\n    <\/div>\r\n  <\/section>\r\n\r\n<\/section>\r\n\r\n<style>\r\n\/* ============================================================\r\n   PAGE ALTIS - THE SAME COMPASS FOR EVERYONE (EN)\r\n   OSE brand: navy #0B2748 \/ #0B3C5D, orange #FF8C00,\r\n   gold #C8862B, green #2F6B45, teal #0E7A85, blue #2E5AA8,\r\n   cream #EFE2C4 \/ #FBF9F4\r\n============================================================ *\/\r\n\r\n.oaltis-page {\r\n  background: #FBF9F4;\r\n  font-family: 'Open Sans', Arial, sans-serif;\r\n  color: #1E2A38;\r\n  overflow: hidden;\r\n  box-sizing: border-box;\r\n}\r\n.oaltis-page *, .oaltis-page *::before, .oaltis-page *::after {\r\n  box-sizing: border-box;\r\n}\r\n\r\n\/* ---------- HERO ---------- *\/\r\n.oaltis-hero {\r\n  width: 100%;\r\n  padding: clamp(48px, 7vw, 88px) 24px clamp(28px, 4vw, 40px);\r\n  text-align: center;\r\n}\r\n.oaltis-hero-inner {\r\n  max-width: 820px;\r\n  margin: 0 auto;\r\n}\r\n.oaltis-title {\r\n  font-family: 'Playfair Display', Georgia, serif;\r\n  font-weight: 700;\r\n  font-size: clamp(24px, 3.6vw, 34px);\r\n  line-height: 1.25;\r\n  color: #0B2748;\r\n  margin: 0 0 20px;\r\n  letter-spacing: 0.4px;\r\n  text-transform: uppercase;\r\n}\r\n.oaltis-subtitle {\r\n  font-family: 'Montserrat', Arial, sans-serif;\r\n  font-size: 15px;\r\n  line-height: 1.7;\r\n  color: #0B3C5D;\r\n  margin: 0 auto;\r\n  max-width: 640px;\r\n  font-weight: 500;\r\n}\r\n.oaltis-accent {\r\n  color: #FF8C00;\r\n  font-weight: 700;\r\n}\r\n.oaltis-accent-navy {\r\n  color: #0B2748;\r\n  font-weight: 700;\r\n}\r\n\r\n\/* ---------- RADIAL DIAGRAM ---------- *\/\r\n.oaltis-diagram-section {\r\n  width: 100%;\r\n  padding: 0 20px clamp(20px, 4vw, 40px);\r\n  display: flex;\r\n  justify-content: center;\r\n}\r\n.oaltis-diagram-wrap {\r\n  position: relative;\r\n  width: 100%;\r\n  max-width: 1080px;\r\n  aspect-ratio: 1000 \/ 1080;\r\n}\r\n.oaltis-lines-svg {\r\n  position: absolute;\r\n  inset: 0;\r\n  width: 100%;\r\n  height: 100%;\r\n  z-index: 1;\r\n}\r\n\r\n\/* Central compass *\/\r\n.oaltis-center {\r\n  position: absolute;\r\n  left: 50%;\r\n  top: 45.5%;\r\n  transform: translate(-50%, -50%);\r\n  width: clamp(100px, 16%, 168px);\r\n  aspect-ratio: 1 \/ 1;\r\n  z-index: 4;\r\n}\r\n.oaltis-compass {\r\n  position: relative;\r\n  width: 100%;\r\n  height: 100%;\r\n}\r\n.oaltis-compass-star {\r\n  width: 100%;\r\n  height: 100%;\r\n  display: block;\r\n  filter: drop-shadow(0 3px 8px rgba(11,39,72,0.30));\r\n}\r\n.oaltis-compass-name {\r\n  position: absolute;\r\n  left: 50%;\r\n  top: 50%;\r\n  transform: translate(-50%, -50%);\r\n  font-family: 'Montserrat', Arial, sans-serif;\r\n  font-weight: 800;\r\n  font-size: clamp(11px, 1.5vw, 15px);\r\n  letter-spacing: 1.5px;\r\n  color: #0B2748;\r\n  z-index: 2;\r\n  background: #FBF9F4;\r\n  padding: 2px 6px;\r\n  border-radius: 20px;\r\n}\r\n.oaltis-compass-label {\r\n  position: absolute;\r\n  font-family: 'Montserrat', Arial, sans-serif;\r\n  font-weight: 700;\r\n  font-size: clamp(7px, 0.95vw, 10.5px);\r\n  letter-spacing: 1px;\r\n  text-transform: uppercase;\r\n  color: #FBF9F4;\r\n  white-space: nowrap;\r\n  background: #0B2748;\r\n  padding: 2px 7px;\r\n  border-radius: 10px;\r\n  border: 1px solid #C8862B;\r\n}\r\n.oaltis-compass-label--top {\r\n  top: -8%;\r\n  left: 50%;\r\n  transform: translateX(-50%);\r\n}\r\n.oaltis-compass-label--bottom {\r\n  bottom: -8%;\r\n  left: 50%;\r\n  transform: translateX(-50%);\r\n}\r\n.oaltis-compass-label--left {\r\n  left: -55%;\r\n  top: 50%;\r\n  transform: translateY(-50%);\r\n}\r\n.oaltis-compass-label--right {\r\n  right: -55%;\r\n  top: 50%;\r\n  transform: translateY(-50%);\r\n}\r\n\r\n\/* ---------- SATELLITE NODES: LARGE IMAGES, NO CIRCULAR FRAME ---------- *\/\r\n.oaltis-node {\r\n  position: absolute;\r\n  width: clamp(175px, 30.5%, 290px);\r\n  text-align: center;\r\n  z-index: 2;\r\n}\r\n.oaltis-node--top    { left: 50%; top: 0%;    transform: translate(-50%, 0); }\r\n.oaltis-node--left   { left: 0%;  top: 20%;   transform: translate(0, 0); }\r\n.oaltis-node--right  { right: 0%; top: 20%;   transform: translate(0, 0); left: auto; }\r\n.oaltis-node--bl      { left: 0%;  top: 53%;   transform: translate(0, 0); }\r\n.oaltis-node--br      { right: 0%; top: 53%;   transform: translate(0, 0); left: auto; }\r\n.oaltis-node--bottom { left: 50%; bottom: 0%; transform: translate(-50%, 0); width: clamp(140px, 22%, 210px); }\r\n\r\n\/* The image fills the ENTIRE space reserved for the node: no circle, large format.\r\n   By default, the image fills the entire reserved space (object-fit: cover),\r\n   except for targeted exceptions (OSE World logo shown in full, Mentor's face framed at the top). *\/\r\n.oaltis-node-photo {\r\n  width: 100%;\r\n  aspect-ratio: 4 \/ 3.1;\r\n  margin: 0 auto 12px;\r\n  border-radius: 130px 130px 14px 14px;\r\n  overflow: hidden;\r\n  border: 4px solid #FBF9F4;\r\n  box-shadow: 0 8px 22px rgba(11, 39, 72, 0.22);\r\n  background: #EFE2C4;\r\n}\r\n.oaltis-node-photo--bottom {\r\n  border-radius: 90px 90px 12px 12px;\r\n  aspect-ratio: 4 \/ 3.4;\r\n}\r\n.oaltis-node-photo img {\r\n  width: 100%;\r\n  height: 100%;\r\n  object-fit: cover !important;\r\n  object-position: center center;\r\n  display: block;\r\n}\r\n\/* Exception: OSE World is a cropped logo\/illustration (PNG) \u2014\r\n   it must always stay fully visible, never cropped. *\/\r\n.oaltis-node-photo--contain img {\r\n  object-fit: contain !important;\r\n  padding: 6px;\r\n}\r\n\/* Exception: The Mentor \/ The Family \u2014 framing raised so the\r\n   face always stays visible, including on mobile. *\/\r\n.oaltis-node-photo--face-top img {\r\n  object-position: center top;\r\n}\r\n\/* Exception: The Ambassador \u2014 soft framing (neither too high nor too low)\r\n   to keep the subject clearly visible without cropping it. *\/\r\n.oaltis-node-photo--face-mid img {\r\n  object-position: center 25%;\r\n}\r\n.oaltis-node-title {\r\n  font-family: 'Playfair Display', Georgia, serif;\r\n  font-weight: 700;\r\n  font-size: clamp(15px, 1.7vw, 19px);\r\n  margin: 0 0 6px;\r\n  line-height: 1.2;\r\n}\r\n.oaltis-node-title--navy   { color: #0B2748; }\r\n.oaltis-node-title--green  { color: #2F6B45; }\r\n.oaltis-node-title--blue   { color: #2E5AA8; }\r\n.oaltis-node-title--orange { color: #C8862B; }\r\n.oaltis-node-title--teal   { color: #0E7A85; }\r\n\r\n.oaltis-node-text {\r\n  font-family: 'Open Sans', Arial, sans-serif;\r\n  font-size: clamp(12px, 1.25vw, 14.5px);\r\n  line-height: 1.5;\r\n  color: #3B4656;\r\n  margin: 0;\r\n}\r\n\r\n\/* ---------- CALLOUT + IMAGE ---------- *\/\r\n.oaltis-callout-section {\r\n  width: 100%;\r\n  padding: 12px 24px clamp(40px, 5vw, 64px);\r\n  display: flex;\r\n  justify-content: center;\r\n}\r\n.oaltis-callout-grid {\r\n  width: 100%;\r\n  max-width: 1140px;\r\n  display: grid;\r\n  grid-template-columns: 1.1fr 1fr;\r\n  gap: 28px;\r\n  align-items: stretch;\r\n}\r\n.oaltis-callout-box {\r\n  background: #FFFFFF;\r\n  border: 1.5px dashed #C8862B;\r\n  border-radius: 18px;\r\n  padding: 28px 30px;\r\n  display: flex;\r\n  flex-direction: column;\r\n  justify-content: center;\r\n}\r\n.oaltis-callout-icon {\r\n  width: 42px;\r\n  height: 42px;\r\n  margin-bottom: 14px;\r\n}\r\n.oaltis-callout-icon svg {\r\n  width: 100%;\r\n  height: 100%;\r\n  display: block;\r\n}\r\n.oaltis-callout-lead {\r\n  font-family: 'Playfair Display', Georgia, serif;\r\n  font-size: clamp(16px, 1.9vw, 19px);\r\n  font-weight: 700;\r\n  line-height: 1.4;\r\n  color: #1E2A38;\r\n  margin: 0 0 12px;\r\n}\r\n.oaltis-callout-text {\r\n  font-size: 15px;\r\n  line-height: 1.7;\r\n  color: #4A5568;\r\n  margin: 0;\r\n}\r\n\r\n.oaltis-callout-image {\r\n  display: flex;\r\n  flex-direction: column;\r\n  border-radius: 18px;\r\n  overflow: hidden;\r\n  background: #FFFFFF;\r\n  border: 1px solid #ECE6D8;\r\n}\r\n.oaltis-callout-image-photo {\r\n  width: 100%;\r\n  min-height: 200px;\r\n  flex: 1;\r\n}\r\n.oaltis-callout-image-photo img {\r\n  width: 100%;\r\n  height: 100%;\r\n  object-fit: cover;\r\n  display: block;\r\n}\r\n.oaltis-callout-caption {\r\n  margin: 0;\r\n  padding: 22px 24px;\r\n  font-family: 'Montserrat', Arial, sans-serif;\r\n  font-size: 15px;\r\n  font-weight: 600;\r\n  line-height: 1.6;\r\n  color: #0B2748;\r\n  background: #FBF9F4;\r\n  border-top: 1px solid #ECE6D8;\r\n}\r\n\r\n\/* ---------- SIGNATURE ---------- *\/\r\n.oaltis-baseline-section {\r\n  width: 100%;\r\n  padding: 0 24px clamp(48px, 6vw, 80px);\r\n  text-align: center;\r\n}\r\n.oaltis-baseline-words {\r\n  font-family: 'Montserrat', Arial, sans-serif;\r\n  font-size: 14px;\r\n  font-weight: 700;\r\n  letter-spacing: 1px;\r\n  text-transform: uppercase;\r\n  color: #0B2748;\r\n  margin: 0 0 14px;\r\n}\r\n.oaltis-dot {\r\n  color: #C8862B;\r\n  margin: 0 4px;\r\n}\r\n.oaltis-baseline-rule {\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  gap: 16px;\r\n  max-width: 560px;\r\n  margin: 0 auto;\r\n}\r\n.oaltis-rule {\r\n  flex: 1;\r\n  height: 1px;\r\n  background: #C8862B;\r\n  max-width: 140px;\r\n}\r\n.oaltis-baseline-strong {\r\n  font-family: 'Montserrat', Arial, sans-serif;\r\n  font-size: 14px;\r\n  font-weight: 800;\r\n  letter-spacing: 1.5px;\r\n  text-transform: uppercase;\r\n  color: #C8862B;\r\n  white-space: nowrap;\r\n}\r\n\r\n\/* ============================================================\r\n   RESPONSIVE - TABLET\r\n   The exact radial geometry from the mockup is preserved;\r\n   only spacing and sizes are scaled down proportionally.\r\n============================================================ *\/\r\n@media (max-width: 1024px) {\r\n  .oaltis-callout-grid {\r\n    grid-template-columns: 1fr;\r\n  }\r\n  .oaltis-callout-image-photo {\r\n    min-height: 260px;\r\n  }\r\n  .oaltis-node {\r\n    width: clamp(140px, 26%, 220px);\r\n  }\r\n}\r\n\r\n@media (max-width: 768px) {\r\n  .oaltis-hero {\r\n    padding: 40px 18px 24px;\r\n  }\r\n  .oaltis-diagram-section {\r\n    padding: 0 10px 24px;\r\n  }\r\n  .oaltis-node-photo {\r\n    border-width: 3px;\r\n    border-radius: 90px 90px 10px 10px;\r\n  }\r\n}\r\n\r\n\/* ============================================================\r\n   RESPONSIVE - MOBILE (\u2264 480px, fine-tuning)\r\n============================================================ *\/\r\n@media (max-width: 480px) {\r\n  .oaltis-title {\r\n    font-size: 22px;\r\n  }\r\n  .oaltis-subtitle {\r\n    font-size: 14px;\r\n  }\r\n  .oaltis-node {\r\n    width: clamp(96px, 26%, 130px);\r\n  }\r\n  .oaltis-node--bottom {\r\n    width: clamp(84px, 20%, 110px);\r\n  }\r\n  .oaltis-node-photo {\r\n    margin-bottom: 6px;\r\n    border-width: 2px;\r\n    border-radius: 60px 60px 8px 8px;\r\n  }\r\n  .oaltis-node-title {\r\n    font-size: 11.5px;\r\n    margin-bottom: 3px;\r\n  }\r\n  .oaltis-node-text {\r\n    font-size: 9.5px;\r\n    line-height: 1.35;\r\n  }\r\n  .oaltis-center {\r\n    width: clamp(72px, 22%, 96px);\r\n  }\r\n  .oaltis-compass-label {\r\n    font-size: 5.5px;\r\n    letter-spacing: 0.3px;\r\n    padding: 1px 4px;\r\n  }\r\n  .oaltis-compass-name {\r\n    font-size: 9px;\r\n  }\r\n  .oaltis-callout-box {\r\n    padding: 22px 20px;\r\n  }\r\n  .oaltis-callout-caption {\r\n    font-size: 14px;\r\n    padding: 20px 18px;\r\n  }\r\n  .oaltis-baseline-words {\r\n    font-size: 12px;\r\n  }\r\n  .oaltis-rule {\r\n    max-width: 60px;\r\n  }\r\n}\r\n\r\n\/* ============================================================\r\n   MOBILE (\u2264 640px) \u2014 VERTICAL LIST LAYOUT\r\n   On desktop and tablet, the exact radial wheel from the mockup\r\n   is preserved. On phones, to make each block immediately clear\r\n   to the visitor, the diagram switches to a clean vertical list:\r\n   compass, then each actor with its large image, title and text,\r\n   in reading order.\r\n============================================================ *\/\r\n@media (max-width: 640px) {\r\n  .oaltis-diagram-wrap {\r\n    display: flex;\r\n    flex-direction: column;\r\n    align-items: center;\r\n    gap: 30px;\r\n    width: 100%;\r\n    max-width: 380px;\r\n    margin: 0 auto;\r\n    aspect-ratio: auto;\r\n  }\r\n  .oaltis-lines-svg {\r\n    display: none;\r\n  }\r\n  .oaltis-center,\r\n  .oaltis-node {\r\n    position: static;\r\n    left: auto;\r\n    right: auto;\r\n    top: auto;\r\n    bottom: auto;\r\n    transform: none;\r\n    width: 100%;\r\n  }\r\n  .oaltis-center {\r\n    max-width: 150px;\r\n  }\r\n  .oaltis-node {\r\n    max-width: 300px;\r\n  }\r\n  .oaltis-node--bottom {\r\n    max-width: 260px;\r\n  }\r\n  .oaltis-node-photo {\r\n    width: 100%;\r\n    aspect-ratio: 4 \/ 2.6;\r\n    margin: 0 auto 12px;\r\n  }\r\n  .oaltis-node-photo--bottom {\r\n    aspect-ratio: 4 \/ 3.2;\r\n  }\r\n  .oaltis-node-title {\r\n    font-size: 16px;\r\n  }\r\n  .oaltis-node-text {\r\n    font-size: 13.5px;\r\n  }\r\n  .oaltis-compass-label {\r\n    font-size: 9px;\r\n  }\r\n  .oaltis-compass-name {\r\n    font-size: 12px;\r\n  }\r\n  .oaltis-compass-label--left {\r\n    left: -30%;\r\n  }\r\n  .oaltis-compass-label--right {\r\n    right: -30%;\r\n  }\r\n}\r\n<\/style>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Altis: the shared compassof the entire OSE community The ALTIS compass isn&#8217;t just for young people, it is the reference point that guides and supports every member of OSE. Alignment Service Transformation Integrity ALTIS OSE World It inspires,it unites,it opens horizons. OSE Country It structures,it connects,it expands. The Club It welcomes,it trains,it helps them grow. [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":1961,"menu_order":2,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"footnotes":"","_links_to":"","_links_to_target":""},"class_list":["post-1980","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/ose-echange.org\/en\/wp-json\/wp\/v2\/pages\/1980","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ose-echange.org\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/ose-echange.org\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/ose-echange.org\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/ose-echange.org\/en\/wp-json\/wp\/v2\/comments?post=1980"}],"version-history":[{"count":6,"href":"https:\/\/ose-echange.org\/en\/wp-json\/wp\/v2\/pages\/1980\/revisions"}],"predecessor-version":[{"id":2306,"href":"https:\/\/ose-echange.org\/en\/wp-json\/wp\/v2\/pages\/1980\/revisions\/2306"}],"up":[{"embeddable":true,"href":"https:\/\/ose-echange.org\/en\/wp-json\/wp\/v2\/pages\/1961"}],"wp:attachment":[{"href":"https:\/\/ose-echange.org\/en\/wp-json\/wp\/v2\/media?parent=1980"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}