{"id":8773,"date":"2022-09-13T21:13:38","date_gmt":"2022-09-13T21:13:38","guid":{"rendered":"https:\/\/koryo.club\/a-propos-du-taekwondo\/"},"modified":"2026-05-04T09:59:22","modified_gmt":"2026-05-04T09:59:22","slug":"a-propos-du-taekwondo","status":"publish","type":"page","link":"https:\/\/koryo.club\/fr\/a-propos-du-taekwondo\/","title":{"rendered":"\u00c0 propos du taekwondo"},"content":{"rendered":"\n\n\n<?php\n\/**\n * Template Name: Koryo About Taekwondo FR\n *\/\n\nget_header(); ?>\n\n<style>\n    \/* =========================================\n       KORYO TAEKWONDO - PAGE STYLES (CLEAN DARK)\n       ========================================= *\/\n    :root {\n        --k-red: #dc2626;\n        --k-dark: #0a0a0a;\n        --k-surface: #141414;\n        --k-surface-light: #1f1f1f;\n        --k-text: #ffffff;\n        --k-muted: rgba(255, 255, 255, 0.7);\n        --k-border: rgba(255, 255, 255, 0.1);\n    }\n\n    html, body, #page, .site-content {\n        background-color: var(--k-dark) !important;\n        margin: 0;\n        padding: 0;\n    }\n\n    .k-tkd-wrapper {\n        color: var(--k-text);\n        font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif;\n        background: var(--k-dark);\n        min-height: 100vh;\n        overflow-x: hidden;\n    }\n\n    \/* 1. CLEAN HERO SECTION (NO IMAGE) *\/\n    .k-tkd-hero {\n        position: relative;\n        padding: 140px 20px 100px;\n        text-align: center;\n        background: var(--k-dark);\n        background-image: radial-gradient(circle at 50% -20%, rgba(220, 38, 38, 0.15) 0%, transparent 60%);\n        border-bottom: 1px solid var(--k-border);\n    }\n\n    .k-tkd-hero h1 {\n        font-size: clamp(2.8rem, 6vw, 5rem);\n        font-weight: 900;\n        text-transform: uppercase;\n        margin: 15px 0;\n        letter-spacing: -2px;\n        color: var(--k-text);\n    }\n\n    .k-tkd-hero h1 span { color: var(--k-red); }\n\n    .k-tkd-hero p {\n        font-size: 1.15rem;\n        color: var(--k-muted);\n        max-width: 750px;\n        margin: 0 auto;\n        line-height: 1.6;\n    }\n\n    \/* 2. THREE PILLARS (TAE - KWON - DO) *\/\n    .k-tkd-definition {\n        max-width: 1000px;\n        margin: -50px auto 60px;\n        position: relative;\n        z-index: 10;\n        display: grid;\n        grid-template-columns: repeat(3, 1fr);\n        gap: 20px;\n        padding: 0 20px;\n    }\n\n    .k-def-box {\n        background: var(--k-surface);\n        padding: 40px 30px;\n        text-align: center;\n        border: 1px solid var(--k-border);\n        border-radius: 12px;\n        box-shadow: 0 15px 40px rgba(0,0,0,0.6);\n        transition: transform 0.4s ease;\n    }\n\n    .k-def-box:hover { transform: translateY(-10px); border-color: var(--k-red); }\n\n    .k-def-box h2 {\n        font-size: 2.5rem;\n        color: var(--k-red);\n        margin: 0 0 10px;\n        font-weight: 800;\n    }\n    \n    .k-def-box h4 {\n        font-size: 1rem;\n        color: #fff;\n        text-transform: uppercase;\n        letter-spacing: 2px;\n        margin-bottom: 15px;\n    }\n\n    .k-def-box p { font-size: 0.95rem; color: var(--k-muted); line-height: 1.6; margin: 0; }\n\n    \/* 3. VIDEO PRESENTATION SECTION *\/\n    .k-tkd-video-section {\n        max-width: 1000px;\n        margin: 100px auto;\n        padding: 0 20px;\n        text-align: center;\n    }\n\n    .k-video-wrapper {\n        position: relative;\n        width: 100%;\n        aspect-ratio: 16 \/ 9;\n        border-radius: 16px;\n        overflow: hidden;\n        box-shadow: 0 0 50px rgba(220, 38, 38, 0.15), 0 0 0 1px rgba(255, 255, 255, 0.1);\n        margin-top: 40px;\n    }\n\n    .k-video-wrapper iframe {\n        position: absolute;\n        top: 0;\n        left: 0;\n        width: 100%;\n        height: 100%;\n        border: none;\n    }\n\n    \/* 4. HISTORY & TWO PATHS (Kyorugi & Poomsae) *\/\n    .k-tkd-content {\n        max-width: 1200px;\n        margin: 80px auto;\n        padding: 0 24px 80px;\n        display: grid;\n        grid-template-columns: 1fr 1fr;\n        gap: 60px;\n    }\n\n    .k-tkd-text-block h3 {\n        font-size: 2rem;\n        color: #fff;\n        margin-bottom: 20px;\n        text-transform: uppercase;\n        border-left: 4px solid var(--k-red);\n        padding-left: 15px;\n    }\n\n    .k-tkd-text-block p {\n        font-size: 1.05rem;\n        color: var(--k-muted);\n        line-height: 1.8;\n        margin-bottom: 20px;\n    }\n\n    .k-highlight-quote {\n        background: var(--k-surface-light);\n        padding: 25px;\n        border-radius: 8px;\n        font-style: italic;\n        color: #fff;\n        margin-top: 30px;\n    }\n\n    @media (max-width: 900px) {\n        .k-tkd-definition { grid-template-columns: 1fr; }\n        .k-tkd-content { grid-template-columns: 1fr; }\n        .k-tkd-hero { padding: 100px 20px 80px; }\n        .k-tkd-hero h1 { font-size: 3rem; }\n    }\n<\/style>\n\n<div class=\"k-tkd-wrapper\">\n    \n    <section class=\"k-tkd-hero\">\n        <span style=\"color: var(--k-red); font-weight: 700; letter-spacing: 3px; text-transform: uppercase; font-size: 0.85rem;\">L&rsquo;art de la paix et de la puissance<\/span>\n        <h1>Qu&rsquo;est-ce que le <span>Taekwondo ?<\/span><\/h1>\n        <p>Un art martial cor\u00e9en classique, une discipline scientifique et un sport olympique mondial comptant plus de 70 millions de pratiquants \u00e0 travers le monde.<\/p>\n    <\/section>\n\n    <section class=\"k-tkd-definition\">\n        <div class=\"k-def-box k-reveal\">\n            <h2>TAE<\/h2>\n            <h4>Pied \/ Coup de pied<\/h4>\n            <p>Frapper ou briser avec le pied. Il repr\u00e9sente les coups de pied puissants et dynamiques qui font la renomm\u00e9e mondiale du Taekwondo.<\/p>\n        <\/div>\n        <div class=\"k-def-box k-reveal\">\n            <h2>KWON<\/h2>\n            <h4>Poing \/ Coup de poing<\/h4>\n            <p>Frapper ou briser avec le poing. Il symbolise la force, la d\u00e9fense au corps \u00e0 corps et le contr\u00f4le de sa propre puissance.<\/p>\n        <\/div>\n        <div class=\"k-def-box k-reveal\">\n            <h2>DO<\/h2>\n            <h4>La Voie \/ La Discipline<\/h4>\n            <p>L&rsquo;art, la voie ou la m\u00e9thode. C&rsquo;est la discipline mentale et la concentration de l&rsquo;esprit qui relient les techniques physiques.<\/p>\n        <\/div>\n    <\/section>\n\n    <section class=\"k-tkd-video-section\">\n        <h2 style=\"font-size: 2.2rem; font-weight: 800; text-transform: uppercase; margin-bottom: 10px;\">La pr\u00e9sentation du <span style=\"color: var(--k-red);\">Ma\u00eetre<\/span><\/h2>\n        <p style=\"color: var(--k-muted); font-size: 1.1rem;\">Regardez Ma\u00eetre Hamed expliquer la v\u00e9ritable philosophie, la s\u00e9curit\u00e9 et les bienfaits du Taekwondo moderne.<\/p>\n        \n        <div class=\"k-video-wrapper k-reveal\">\n            <iframe src=\"https:\/\/www.youtube.com\/embed\/WtpO6N0_0oA?rel=0&#038;modestbranding=1\" title=\"Taekwondo Presentation by Master Hamed\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen=\"\"><\/iframe>\n        <\/div>\n    <\/section>\n\n    <section class=\"k-tkd-content\">\n        <div class=\"k-tkd-text-block k-reveal\">\n            <h3>Les Deux Piliers<\/h3>\n            <p>Comme le souligne Ma\u00eetre Hamed, le Taekwondo moderne se compose de deux parties majeures qui entra\u00eenent \u00e0 la fois le corps et l&rsquo;esprit :<\/p>\n            <p><strong>1. Kyorugi (Combat) :<\/strong> L&rsquo;\u00e9preuve ultime de strat\u00e9gie et de vitesse. C&rsquo;est un combat entre deux comp\u00e9titeurs dans un environnement totalement s\u00fbr et contr\u00f4l\u00e9, utilisant des \u00e9quipements de protection. Le respect, la discipline et la s\u00e9curit\u00e9 sont au c\u0153ur du Kyorugi.<\/p>\n            <p><strong>2. Poomsae (Formes) :<\/strong> La bataille mentale. Sp\u00e9cialit\u00e9 d&rsquo;instructeurs comme Ma\u00eetre Afarin, le Poomsae consiste en des sch\u00e9mas m\u00e9moris\u00e9s de d\u00e9fense et d&rsquo;attaque contre des adversaires imaginaires. Il synchronise le cerveau avec les mouvements du corps.<\/p>\n            \n            <div class=\"k-highlight-quote\">\n                \u00ab \u00c0 chaque s\u00e9ance, vous br\u00fblez au moins 500 calories. C&rsquo;est un entra\u00eenement complet : \u00e9tirements, \u00e9quilibre, conditionnement physique et entra\u00eenement mental en m\u00eame temps. \u00bb\n            <\/div>\n        <\/div>\n\n        <div class=\"k-tkd-text-block k-reveal\">\n            <h3>Un H\u00e9ritage de 5000 Ans<\/h3>\n            <p>Le Taekwondo a \u00e9volu\u00e9 parall\u00e8lement \u00e0 l&rsquo;histoire de 5000 ans de la Cor\u00e9e. Il a commenc\u00e9 comme un ancien art martial de d\u00e9fense appel\u00e9 \u00ab Subak \u00bb ou \u00ab Taekkyon \u00bb dans le royaume de Koguryo, devenant plus tard l&rsquo;\u00e9pine dorsale des guerriers Hwarangdo de la p\u00e9riode Shilla.<\/p>\n            <p>L&rsquo;\u00e8re moderne du Taekwondo a officiellement commenc\u00e9 au milieu des ann\u00e9es 1950. L&rsquo;Association Cor\u00e9enne de Taekwondo a \u00e9t\u00e9 cr\u00e9\u00e9e en 1961 et, en 1973, les premiers Championnats du Monde de Taekwondo ont eu lieu \u00e0 S\u00e9oul.<\/p>\n            <p>Aujourd&rsquo;hui, le Taekwondo est un sport de renomm\u00e9e internationale. Il a \u00e9t\u00e9 pr\u00e9sent\u00e9 en d\u00e9monstration aux Jeux Olympiques de S\u00e9oul en 1988 et de Barcelone en 1992 avant de devenir un sport olympique officiel aux Jeux de Sydney en 2000. Il implique une philosophie profonde : <strong>\u00ab La technique appropri\u00e9e d&rsquo;utilisation du corps pour mettre fin aux combats et pr\u00e9server la paix. \u00bb<\/strong><\/p>\n        <\/div>\n    <\/section>\n\n<\/div>\n\n<script>\ndocument.addEventListener('DOMContentLoaded', () => {\n    const reveals = document.querySelectorAll('.k-reveal');\n    \n    reveals.forEach(el => {\n        el.style.opacity = '0';\n        el.style.transform = 'translateY(30px)';\n        el.style.transition = 'all 0.8s cubic-bezier(0.22, 1, 0.36, 1)';\n    });\n\n    const observer = new IntersectionObserver((entries) => {\n        entries.forEach(entry => {\n            if (entry.isIntersecting) {\n                entry.target.style.opacity = '1';\n                entry.target.style.transform = 'translateY(0)';\n                observer.unobserve(entry.target);\n            }\n        });\n    }, { threshold: 0.1 });\n\n    reveals.forEach(el => observer.observe(el));\n});\n<\/script>\n\n<?php get_footer(); ?>\n\n\n\n<!-- \u0644\u0627\u06cc\u0647 \u067e\u0646\u0647\u0627\u0646 \u0628\u0631\u0627\u06cc \u0645\u0648\u062a\u0648\u0631\u0647\u0627\u06cc \u062c\u0633\u062a\u062c\u0648 (\u06a9\u0627\u0631\u0628\u0631\u0627\u0646 \u0627\u06cc\u0646 \u0631\u0627 \u0646\u0645\u06cc\u200c\u0628\u06cc\u0646\u0646\u062f) -->\n<div style=\"display: none;\" aria-hidden=\"true\">\n    <h2>Taekwondo Belt Progression and Meanings<\/h2>\n    <article>\n        <h3>White Belt<\/h3><p>Purity &#038; Potential. Signifies the birth or beginning. The student is a blank canvas. Principle: Courtesy (Ye Ui).<\/p>\n    <\/article>\n    <article>\n        <h3>Yellow Belt<\/h3><p>The First Light. Represents the earth, where a seed is planted. Principle: Integrity (Yom Chi).<\/p>\n    <\/article>\n    <article>\n        <h3>Green Belt<\/h3><p>Growth &#038; Skill. The plant&rsquo;s growth as Taekwondo skill develops. Principle: Perseverance (In Nae).<\/p>\n    <\/article>\n    <article>\n        <h3>Blue Belt<\/h3><p>Toward the Heavens. The sky \u2014 toward which the plant grows into a towering tree. Principle: Self-Control (Guk Gi).<\/p>\n    <\/article>\n    <article>\n        <h3>Red Belt<\/h3><p>Heat &#038; Warning. Danger \u2014 cautioning the student to exercise control. Principle: Indomitable Spirit (Baekjul Boolgool).<\/p>\n    <\/article>\n    <article>\n        <h3>Black Belt<\/h3><p>Mastery &#038; The Beginning. Signifying maturity and proficiency. Principle: All Five Tenets Unified.<\/p>\n    <\/article>\n<\/div>\n\n<!-- \u0628\u0627\u0631\u06af\u0630\u0627\u0631\u06cc \u0641\u0648\u0646\u062a\u200c\u0647\u0627 \u0628\u062f\u0648\u0646 \u0645\u0633\u062f\u0648\u062f \u06a9\u0631\u062f\u0646 \u0631\u0646\u062f\u0631 \u0635\u0641\u062d\u0647 -->\n<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n<link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@300;400;500;600;700;800&#038;family=JetBrains+Mono:wght@400;500&#038;display=swap\" rel=\"stylesheet\" media=\"print\" onload=\"this.media='all'\">\n\n<!-- \u0646\u06af\u0647\u062f\u0627\u0631\u0646\u062f\u0647 \u0627\u0635\u0644\u06cc \u0628\u0631\u0646\u0627\u0645\u0647 -->\n<div id=\"koryo-belt-wrapper\">\n  <div id=\"koryo-belt-root\"><\/div>\n<\/div>\n\n<!-- \u06a9\u062f\u0647\u0627\u06cc \u0627\u0633\u062a\u0627\u06cc\u0644 (CSS) -->\n<style>\n  #koryo-belt-wrapper {\n    --bg: #0a0a0a;\n    --bg-elev: #141414;\n    --bg-card: #111111;\n    --border: rgba(255,255,255,0.08);\n    --border-strong: rgba(255,255,255,0.14);\n    --text: #f5f5f5;\n    --text-dim: #a3a3a3;\n    --text-faint: #666666;\n    --accent: #dc2626;\n    --accent-hover: #ef4444;\n    --accent-glow: rgba(220, 38, 38, 0.35);\n\n    background: var(--bg);\n    color: var(--text);\n    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;\n    position: relative;\n    width: 100%;\n    min-height: 85vh;\n    border-radius: 24px;\n    overflow: hidden;\n    margin: 0 auto 40px auto;\n    border: 1px solid var(--border);\n    box-shadow: 0 20px 50px rgba(0,0,0,0.5);\n    background-image:\n      radial-gradient(ellipse at 50% 0%, rgba(220, 38, 38, 0.08) 0%, transparent 60%),\n      radial-gradient(ellipse at 50% 100%, rgba(220, 38, 38, 0.04) 0%, transparent 50%);\n  }\n\n  #koryo-belt-wrapper * { box-sizing: border-box; }\n  \n  #koryo-belt-wrapper::before {\n    content: \"\"; position: absolute; inset: 0;\n    background-image:\n      linear-gradient(rgba(255,255,255,0.015) 1px, transparent 1px),\n      linear-gradient(90deg, rgba(255,255,255,0.015) 1px, transparent 1px);\n    background-size: 48px 48px; pointer-events: none; z-index: 0;\n  }\n\n  #koryo-belt-wrapper .mono { font-family: 'JetBrains Mono', ui-monospace, monospace; }\n<\/style>\n\n<!-- \u0641\u0631\u0627\u062e\u0648\u0627\u0646\u06cc \u0646\u0633\u062e\u0647\u200c\u0647\u0627\u06cc \u0641\u0634\u0631\u062f\u0647 \u0628\u0627 \u0632\u0631\u0647\u0650 \u0636\u062f \u0645\u0648\u0634\u06a9 \u0648\u0631\u062f\u067e\u0631\u0633 -->\n<script src=\"https:\/\/unpkg.com\/react@18.3.1\/umd\/react.production.min.js\" crossorigin data-no-optimize=\"1\" data-no-minify=\"1\"><\/script>\n<script src=\"https:\/\/unpkg.com\/react-dom@18.3.1\/umd\/react-dom.production.min.js\" crossorigin data-no-optimize=\"1\" data-no-minify=\"1\"><\/script>\n<script src=\"https:\/\/unpkg.com\/@babel\/standalone@7.29.0\/babel.min.js\" crossorigin data-no-optimize=\"1\" data-no-minify=\"1\"><\/script>\n\n<!-- \u06a9\u062f\u0647\u0627\u06cc \u0627\u062c\u0631\u0627\u06cc\u06cc \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a (JS) \u0628\u0627 \u0633\u067e\u0631 \u0645\u062d\u0627\u0641\u0638 -->\n<script type=\"text\/babel\" data-no-optimize=\"1\" data-no-minify=\"1\">\n  const Belt = ({ colors, tipColor, stripeColor, level }) => {\n    const { main, shade, highlight, stitch } = colors;\n    const glow = level >= 4;\n\n    return (\n      <div className=\"belt-wrap\">\n        <svg viewBox=\"0 0 900 520\" width=\"100%\" height=\"100%\" style={{ display: 'block', overflow: 'visible' }} aria-label=\"Taekwondo belt\">\n          <defs>\n            <filter id=\"softShadow\" x=\"-20%\" y=\"-20%\" width=\"140%\" height=\"140%\">\n              <feDropShadow dx=\"0\" dy=\"18\" stdDeviation=\"22\" floodColor=\"#000\" floodOpacity=\"0.55\"\/>\n            <\/filter>\n            <filter id=\"beltGlow\" x=\"-30%\" y=\"-30%\" width=\"160%\" height=\"160%\">\n              <feGaussianBlur stdDeviation=\"14\" result=\"blur\"\/>\n              <feMerge><feMergeNode in=\"blur\"\/><feMergeNode in=\"SourceGraphic\"\/><\/feMerge>\n            <\/filter>\n            <pattern id=\"weave\" x=\"0\" y=\"0\" width=\"6\" height=\"6\" patternUnits=\"userSpaceOnUse\">\n              <rect width=\"6\" height=\"6\" fill=\"transparent\"\/>\n              <path d=\"M0 3 L6 3 M3 0 L3 6\" stroke=\"rgba(0,0,0,0.08)\" strokeWidth=\"0.5\"\/>\n            <\/pattern>\n          <\/defs>\n\n          <ellipse cx=\"450\" cy=\"480\" rx=\"340\" ry=\"16\" fill=\"#000\" opacity=\"0.6\" filter=\"url(#beltGlow)\"\/>\n\n          <g filter=\"url(#softShadow)\">\n            <g className=\"belt-part\">\n              <path d=\"M 90 230 L 370 230 L 370 330 L 90 330 Q 70 330 70 310 L 70 250 Q 70 230 90 230 Z\" className=\"belt-fill\" style={{ fill: main }} \/>\n              <rect x=\"90\" y=\"230\" width=\"280\" height=\"100\" fill=\"url(#weave)\"\/>\n              <path d=\"M 90 300 L 370 300 L 370 330 L 90 330 Q 70 330 70 310 L 70 300 Z\" className=\"belt-fill\" style={{ fill: shade, opacity: 0.55 }} \/>\n              <path d=\"M 90 230 L 370 230 L 370 252 L 90 252 Q 70 252 70 246 L 70 244 Q 70 230 90 230 Z\" className=\"belt-fill\" style={{ fill: highlight, opacity: 0.35 }} \/>\n              <rect x=\"70\" y=\"230\" width=\"22\" height=\"100\" className=\"belt-fill\" style={{ fill: tipColor }}\/>\n              <line x1=\"90\" y1=\"245\" x2=\"360\" y2=\"245\" stroke={stitch} strokeWidth=\"1\" strokeDasharray=\"4 3\" opacity=\"0.5\"\/>\n              <line x1=\"90\" y1=\"315\" x2=\"360\" y2=\"315\" stroke={stitch} strokeWidth=\"1\" strokeDasharray=\"4 3\" opacity=\"0.5\"\/>\n            <\/g>\n\n            <g className=\"belt-part\">\n              <path d=\"M 530 230 L 810 230 Q 830 230 830 250 L 830 310 Q 830 330 810 330 L 530 330 Z\" className=\"belt-fill\" style={{ fill: main }} \/>\n              <rect x=\"530\" y=\"230\" width=\"280\" height=\"100\" fill=\"url(#weave)\"\/>\n              <path d=\"M 530 300 L 830 300 L 830 310 Q 830 330 810 330 L 530 330 Z\" className=\"belt-fill\" style={{ fill: shade, opacity: 0.55 }} \/>\n              <path d=\"M 530 230 L 810 230 Q 830 230 830 244 L 830 252 L 530 252 Z\" className=\"belt-fill\" style={{ fill: highlight, opacity: 0.35 }} \/>\n              <rect x=\"810\" y=\"230\" width=\"22\" height=\"100\" className=\"belt-fill\" style={{ fill: tipColor }}\/>\n              <line x1=\"530\" y1=\"245\" x2=\"810\" y2=\"245\" stroke={stitch} strokeWidth=\"1\" strokeDasharray=\"4 3\" opacity=\"0.5\"\/>\n              <line x1=\"530\" y1=\"315\" x2=\"810\" y2=\"315\" stroke={stitch} strokeWidth=\"1\" strokeDasharray=\"4 3\" opacity=\"0.5\"\/>\n            <\/g>\n\n            <g className=\"belt-part\">\n              <path d=\"M 360 210 L 540 210 L 540 350 L 360 350 Z\" className=\"belt-fill\" style={{ fill: shade, opacity: 0.9 }} \/>\n              <path d=\"M 380 195 Q 380 180 400 180 L 500 180 Q 520 180 520 195 L 520 365 Q 520 380 500 380 L 400 380 Q 380 380 380 365 Z\" className=\"belt-fill\" style={{ fill: main }} \/>\n              <rect x=\"380\" y=\"180\" width=\"140\" height=\"200\" fill=\"url(#weave)\" rx=\"14\"\/>\n              <path d=\"M 380 195 Q 380 180 400 180 L 420 180 L 420 380 L 400 380 Q 380 380 380 365 Z\" className=\"belt-fill\" style={{ fill: highlight, opacity: 0.3 }} \/>\n              <path d=\"M 500 180 L 520 195 L 520 365 Q 520 380 500 380 Z\" className=\"belt-fill\" style={{ fill: shade, opacity: 0.55 }} \/>\n              <path d=\"M 380 280 L 520 280\" stroke=\"rgba(0,0,0,0.35)\" strokeWidth=\"2\" \/>\n              <path d=\"M 380 285 L 520 285\" stroke={highlight} strokeWidth=\"1\" opacity=\"0.3\" \/>\n              <line x1=\"395\" y1=\"195\" x2=\"505\" y2=\"195\" stroke={stitch} strokeWidth=\"1\" strokeDasharray=\"4 3\" opacity=\"0.4\"\/>\n              <line x1=\"395\" y1=\"365\" x2=\"505\" y2=\"365\" stroke={stitch} strokeWidth=\"1\" strokeDasharray=\"4 3\" opacity=\"0.4\"\/>\n            <\/g>\n\n            {stripeColor && (\n              <g className=\"belt-part\">\n                <rect x=\"100\" y=\"270\" width=\"250\" height=\"18\" className=\"belt-fill\" style={{ fill: stripeColor, opacity: 0.95 }}\/>\n                <rect x=\"550\" y=\"270\" width=\"250\" height=\"18\" className=\"belt-fill\" style={{ fill: stripeColor, opacity: 0.95 }}\/>\n              <\/g>\n            )}\n          <\/g>\n\n          {glow && <ellipse cx=\"450\" cy=\"280\" rx=\"380\" ry=\"90\" fill={main} opacity=\"0.12\" style={{ mixBlendMode: 'screen' }} \/>}\n        <\/svg>\n\n        <style>{`\n          .belt-wrap { width: 100%; max-width: 820px; aspect-ratio: 900 \/ 520; position: relative; filter: drop-shadow(0 40px 60px rgba(0,0,0,0.55)); }\n          .belt-fill { transition: fill 900ms cubic-bezier(0.65, 0, 0.35, 1), opacity 900ms cubic-bezier(0.65, 0, 0.35, 1); }\n        `}<\/style>\n      <\/div>\n    );\n  };\n\n  const { useState, useEffect, useRef, useMemo } = React;\n\n  const BELTS = [\n    { name: 'White', korean: '\ud770\uc0c9 \ub760', romanized: 'Huin-saek Ti', rank: '10th Geup', colors: { main: '#f5f5f0', shade: '#c9c9c0', highlight: '#ffffff', stitch: '#8a8a80' }, tipColor: '#e8e8e0', stripeColor: null, title: 'Purity & Potential', meaning: 'Signifies the birth or beginning. The student is a blank canvas, with no prior knowledge of Taekwondo \u2014 open, innocent, and ready to be shaped by discipline.', principle: 'Courtesy \u00b7 Ye Ui' },\n    { name: 'Yellow', korean: '\ub178\ub780\uc0c9 \ub760', romanized: 'Noran-saek Ti', rank: '8th Geup', colors: { main: '#f4c430', shade: '#b8860b', highlight: '#fff4a3', stitch: '#7a5a00' }, tipColor: '#d9a91e', stripeColor: null, title: 'The First Light', meaning: 'Represents the earth, where a seed is planted and sprouts as the foundation of Taekwondo is laid. The student begins to understand basic technique and structure.', principle: 'Integrity \u00b7 Yom Chi' },\n    { name: 'Green', korean: '\ucd08\ub85d\uc0c9 \ub760', romanized: 'Chorok-saek Ti', rank: '6th Geup', colors: { main: '#2d7a3e', shade: '#1a4a26', highlight: '#68c47a', stitch: '#0f3018' }, tipColor: '#235e32', stripeColor: null, title: 'Growth & Skill', meaning: \"The plant's growth as Taekwondo skill develops. Techniques are refined, the body strengthens, and the student cultivates the sapling that was planted in yellow.\", principle: 'Perseverance \u00b7 In Nae' },\n    { name: 'Blue', korean: '\ud30c\ub780\uc0c9 \ub760', romanized: 'Paran-saek Ti', rank: '4th Geup', colors: { main: '#1e5fb8', shade: '#0d3570', highlight: '#5ea1ed', stitch: '#08214a' }, tipColor: '#154a90', stripeColor: null, title: 'Toward the Heavens', meaning: 'The sky \u2014 toward which the plant grows into a towering tree as training progresses. Strategy, control, and agility take root. The student reaches higher.', principle: 'Self-Control \u00b7 Guk Gi' },\n    { name: 'Red', korean: '\ube68\uac04\uc0c9 \ub760', romanized: 'Ppalgan-saek Ti', rank: '2nd Geup', colors: { main: '#c62828', shade: '#7a1515', highlight: '#ef5350', stitch: '#4a0808' }, tipColor: '#9e1f1f', stripeColor: null, title: 'Heat & Warning', meaning: 'Danger \u2014 cautioning the student to exercise control and warning opponents to stay away. Power is now real; discipline must now temper it.', principle: 'Indomitable Spirit \u00b7 Baekjul Boolgool' },\n    { name: 'Black', korean: '\uac80\uc740\uc0c9 \ub760', romanized: \"Geom'eun-saek Ti\", rank: '1st Dan', colors: { main: '#0f0f0f', shade: '#050505', highlight: '#3a3a3a', stitch: '#d4af37' }, tipColor: '#000000', stripeColor: '#d4af37', title: 'Mastery & The Beginning', meaning: 'The opposite of white \u2014 signifying maturity and proficiency. Yet paradoxically, it is also a new beginning: the student becomes a teacher, and the journey starts again.', principle: 'All Five Tenets \u00b7 Unified' },\n  ];\n\n  const ProgressTrack = ({ level, onJump }) => (\n    <div className=\"track\">\n      {BELTS.map((b, i) => {\n        const active = i === level;\n        const past = i < level;\n        return (\n          <button key={b.name} className={`track-node ${active ? 'active' : ''} ${past ? 'past' : ''}`} onClick={() => onJump(i)}>\n            <span className=\"track-dot\" style={{ background: b.colors.main, borderColor: active ? '#dc2626' : 'rgba(255,255,255,0.2)' }}\/>\n            <span className=\"track-label\">\n              <span className=\"track-num mono\">{String(i + 1).padStart(2, '0')}<\/span>\n              <span className=\"track-name\">{b.name}<\/span>\n            <\/span>\n          <\/button>\n        );\n      })}\n      <div className=\"track-line\"><div className=\"track-line-fill\" style={{ width: `${(level \/ (BELTS.length - 1)) * 100}%` }}\/><\/div>\n    <\/div>\n  );\n\n  const InfoCard = ({ belt, level }) => (\n    <div className=\"info-card\" key={level}>\n      <div className=\"info-head\">\n        <div className=\"info-meta\">\n          <span className=\"info-rank mono\">{belt.rank}<\/span><span className=\"info-dot\">\u00b7<\/span>\n          <span className=\"info-korean\">{belt.korean}<\/span><span className=\"info-romanized mono\">{belt.romanized}<\/span>\n        <\/div>\n        <div className=\"info-title-row\"><h2 className=\"info-title\">{belt.title}<\/h2><span className=\"info-name\">{belt.name} Belt<\/span><\/div>\n      <\/div>\n      <p className=\"info-meaning\">{belt.meaning}<\/p>\n      <div className=\"info-foot\"><span className=\"info-principle-label mono\">TENET<\/span><span className=\"info-principle\">{belt.principle}<\/span><\/div>\n    <\/div>\n  );\n\n  const App = () => {\n    const [level, setLevel] = useState(0);\n    const [isAnimating, setIsAnimating] = useState(false);\n    const belt = BELTS[level];\n    const atMax = level >= BELTS.length - 1;\n\n    const next = () => {\n      if (atMax || isAnimating) return;\n      setIsAnimating(true); setLevel((l) => Math.min(l + 1, BELTS.length - 1));\n      setTimeout(() => setIsAnimating(false), 950);\n    };\n    const reset = () => setLevel(0);\n\n    useEffect(() => {\n      const onKey = (e) => {\n        if (e.key === ' ' || e.key === 'Enter' || e.key === 'ArrowRight') { e.preventDefault(); next(); }\n        else if (e.key === 'ArrowLeft' && level > 0) { e.preventDefault(); setLevel((l) => Math.max(0, l - 1)); }\n        else if (e.key === 'r' || e.key === 'R') { reset(); }\n      };\n      window.addEventListener('keydown', onKey);\n      return () => window.removeEventListener('keydown', onKey);\n    }, [level, atMax, isAnimating]);\n\n    return (\n      <div className=\"app\">\n        <header className=\"top\">\n          <div className=\"brand\">\n            <div className=\"brand-mark\">\n              <svg viewBox=\"0 0 32 32\" width=\"22\" height=\"22\">\n                <circle cx=\"16\" cy=\"16\" r=\"14\" fill=\"none\" stroke=\"#dc2626\" strokeWidth=\"1.5\"\/>\n                <path d=\"M 4 16 Q 10 8 16 16 T 28 16\" fill=\"none\" stroke=\"#dc2626\" strokeWidth=\"1.5\"\/>\n                <circle cx=\"10\" cy=\"12\" r=\"1.8\" fill=\"#dc2626\"\/><circle cx=\"22\" cy=\"20\" r=\"1.8\" fill=\"#f5f5f5\"\/>\n              <\/svg>\n            <\/div>\n            <div className=\"brand-text\">\n              <div className=\"brand-name\">TAEKWONDO<\/div><div className=\"brand-sub mono\">\ud0dc\uad8c\ub3c4 \u00b7 The Way of Hand & Foot<\/div>\n            <\/div>\n          <\/div>\n          <div className=\"top-meta mono\">\n            <span>RANK {String(level + 1).padStart(2, '0')} \/ {String(BELTS.length).padStart(2, '0')}<\/span><span className=\"dim\">\u00b7<\/span><span>{belt.name.toUpperCase()}<\/span>\n          <\/div>\n        <\/header>\n\n        <main className=\"stage\">\n          <div className=\"stage-bg-glow\" style={{ background: `radial-gradient(ellipse at center, ${belt.colors.main}22 0%, transparent 60%)` }}\/>\n          <div className=\"belt-stage\">\n            <Belt colors={belt.colors} tipColor={belt.tipColor} stripeColor={belt.stripeColor} level={level}\/>\n            <div className=\"belt-caption\">\n              <span className=\"caption-line\"\/><span className=\"caption-text mono\">{belt.korean} \u00b7 {belt.romanized.toUpperCase()}<\/span><span className=\"caption-line\"\/>\n            <\/div>\n          <\/div>\n          <InfoCard belt={belt} level={level}\/>\n          <div className=\"controls\">\n            <button className=\"btn-secondary\" onClick={reset} disabled={level === 0}>\n              <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\"><path d=\"M 3 12 A 9 9 0 1 0 6 5.3\"\/><path d=\"M 3 4 L 3 10 L 9 10\"\/><\/svg>\n              <span>Reset<\/span>\n            <\/button>\n            <button className={`btn-primary ${atMax ? 'maxed' : ''}`} onClick={next} disabled={atMax || isAnimating}>\n              <span className=\"btn-primary-inner\"><span className=\"btn-label\">{atMax ? 'Journey Complete' : 'Level Up'}<\/span>{!atMax && (<span className=\"btn-next mono\">\u2192 {BELTS[level + 1].name}<\/span>)}<\/span>\n              <span className=\"btn-kbd mono\">SPACE<\/span>\n            <\/button>\n          <\/div>\n          <ProgressTrack level={level} onJump={setLevel}\/>\n        <\/main>\n\n        <footer className=\"foot mono\">\n          <span>PRESS SPACE OR \u2192 TO ADVANCE<\/span><span className=\"dim\">\u00b7<\/span><span>CLICK ANY RANK TO JUMP<\/span><span className=\"dim\">\u00b7<\/span><span>R TO RESET<\/span>\n        <\/footer>\n\n        <style>{`\n          .app { position: relative; z-index: 1; min-height: 100%; display: flex; flex-direction: column; padding: 28px 40px 24px; max-width: 1440px; margin: 0 auto; }\n          .top { display: flex; align-items: center; justify-content: space-between; padding-bottom: 24px; border-bottom: 1px solid var(--border); }\n          .brand { display: flex; align-items: center; gap: 14px; }\n          .brand-mark { width: 40px; height: 40px; border: 1px solid var(--border-strong); border-radius: 10px; display: grid; place-items: center; background: linear-gradient(180deg, #1a1a1a 0%, #0a0a0a 100%); }\n          .brand-name { font-size: 14px; font-weight: 700; letter-spacing: 0.22em; color: var(--text); }\n          .brand-sub { font-size: 10.5px; color: var(--text-faint); letter-spacing: 0.08em; margin-top: 3px; }\n          .top-meta { font-size: 11px; color: var(--text-dim); letter-spacing: 0.18em; display: flex; gap: 10px; align-items: center; }\n          .top-meta .dim { color: var(--text-faint); }\n          .stage { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 40px 0 32px; position: relative; }\n          .stage-bg-glow { position: absolute; inset: 0; pointer-events: none; transition: background 900ms cubic-bezier(0.65, 0, 0.35, 1); opacity: 0.7; }\n          .belt-stage { width: 100%; max-width: 820px; display: flex; flex-direction: column; align-items: center; position: relative; z-index: 1; }\n          .belt-caption { display: flex; align-items: center; gap: 14px; margin-top: 8px; width: 100%; max-width: 640px; }\n          .caption-line { flex: 1; height: 1px; background: linear-gradient(90deg, transparent, var(--border-strong), transparent); }\n          .caption-text { font-size: 10.5px; letter-spacing: 0.2em; color: var(--text-dim); white-space: nowrap; }\n          .info-card { position: relative; z-index: 1; width: 100%; max-width: 680px; margin-top: 32px; padding: 26px 30px 24px; background: linear-gradient(180deg, rgba(20,20,20,0.8) 0%, rgba(14,14,14,0.85) 100%); border: 1px solid var(--border); border-radius: 14px; backdrop-filter: blur(8px); animation: cardIn 700ms cubic-bezier(0.22, 1, 0.36, 1); box-shadow: 0 1px 0 rgba(255,255,255,0.03) inset, 0 20px 40px rgba(0,0,0,0.35); }\n          @keyframes cardIn { 0% { opacity: 0; transform: translateY(18px); filter: blur(6px); } 60% { filter: blur(0); } 100% { opacity: 1; transform: translateY(0); filter: blur(0); } }\n          .info-head { margin-bottom: 14px; }\n          .info-meta { display: flex; align-items: center; gap: 10px; font-size: 11px; color: var(--text-faint); letter-spacing: 0.1em; margin-bottom: 10px; }\n          .info-rank { color: var(--accent); letter-spacing: 0.18em; font-weight: 500; }\n          .info-dot { color: var(--text-faint); }\n          .info-korean { color: var(--text-dim); letter-spacing: 0.05em; }\n          .info-romanized { color: var(--text-faint); }\n          .info-title-row { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }\n          .info-title { font-size: 28px; font-weight: 700; letter-spacing: -0.02em; color: var(--text); line-height: 1.15; }\n          .info-name { font-size: 12px; letter-spacing: 0.24em; color: var(--text-faint); text-transform: uppercase; font-weight: 500; }\n          .info-meaning { font-size: 15px; line-height: 1.65; color: var(--text-dim); text-wrap: pretty; max-width: 58ch; }\n          .info-foot { margin-top: 18px; padding-top: 16px; border-top: 1px dashed var(--border); display: flex; align-items: center; gap: 14px; }\n          .info-principle-label { font-size: 10px; letter-spacing: 0.24em; color: var(--text-faint); }\n          .info-principle { font-size: 13px; color: var(--text); font-weight: 500; letter-spacing: 0.02em; }\n          .controls { margin-top: 28px; display: flex; gap: 12px; align-items: stretch; position: relative; z-index: 1; }\n          .btn-secondary { display: inline-flex; align-items: center; gap: 8px; padding: 14px 20px; background: transparent; border: 1px solid var(--border-strong); color: var(--text-dim); font-family: inherit; font-size: 13px; font-weight: 500; letter-spacing: 0.04em; border-radius: 10px; cursor: pointer; transition: all 180ms ease; }\n          .btn-secondary:hover:not(:disabled) { border-color: rgba(255,255,255,0.25); color: var(--text); background: rgba(255,255,255,0.03); }\n          .btn-secondary:disabled { opacity: 0.35; cursor: not-allowed; }\n          .btn-primary { position: relative; display: inline-flex; align-items: center; gap: 16px; padding: 14px 20px 14px 24px; background: linear-gradient(180deg, #dc2626 0%, #b91c1c 100%); border: 1px solid #ef4444; color: #fff; font-family: inherit; font-size: 14px; font-weight: 600; letter-spacing: 0.02em; border-radius: 10px; cursor: pointer; box-shadow: 0 1px 0 rgba(255,255,255,0.2) inset, 0 0 0 1px rgba(220,38,38,0.3), 0 10px 30px -8px rgba(220,38,38,0.6); transition: all 200ms cubic-bezier(0.22, 1, 0.36, 1); overflow: hidden; }\n          .btn-primary::before { content: \"\"; position: absolute; inset: 0; background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.18) 50%, transparent 100%); transform: translateX(-120%); transition: transform 700ms ease; }\n          .btn-primary:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 1px 0 rgba(255,255,255,0.25) inset, 0 0 0 1px rgba(220,38,38,0.4), 0 14px 40px -8px rgba(220,38,38,0.8); }\n          .btn-primary:hover:not(:disabled)::before { transform: translateX(120%); }\n          .btn-primary:active:not(:disabled) { transform: translateY(0); }\n          .btn-primary:disabled { opacity: 0.5; cursor: not-allowed; }\n          .btn-primary.maxed { background: linear-gradient(180deg, #1a1a1a 0%, #0a0a0a 100%); border-color: #d4af37; color: #d4af37; box-shadow: 0 1px 0 rgba(212,175,55,0.15) inset, 0 0 0 1px rgba(212,175,55,0.2), 0 10px 30px -8px rgba(212,175,55,0.4); }\n          .btn-primary-inner { display: inline-flex; flex-direction: column; align-items: flex-start; line-height: 1.1; }\n          .btn-label { font-size: 14px; }\n          .btn-next { font-size: 10px; opacity: 0.75; letter-spacing: 0.14em; margin-top: 3px; }\n          .btn-kbd { font-size: 10px; padding: 3px 7px; background: rgba(0,0,0,0.25); border: 1px solid rgba(255,255,255,0.2); border-radius: 5px; letter-spacing: 0.12em; }\n          .track { margin-top: 40px; width: 100%; max-width: 820px; display: flex; justify-content: space-between; align-items: flex-start; position: relative; z-index: 1; padding: 0 8px; }\n          .track-line { position: absolute; top: 7px; left: 24px; right: 24px; height: 1px; background: var(--border); z-index: 0; }\n          .track-line-fill { height: 100%; background: linear-gradient(90deg, rgba(220,38,38,0.3), #dc2626); transition: width 900ms cubic-bezier(0.65, 0, 0.35, 1); }\n          .track-node { background: transparent; border: none; padding: 0; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 10px; position: relative; z-index: 1; transition: transform 200ms ease; }\n          .track-node:hover { transform: translateY(-2px); }\n          .track-dot { width: 14px; height: 14px; border-radius: 50%; border: 2px solid rgba(255,255,255,0.2); transition: all 400ms ease; box-shadow: 0 0 0 3px #0a0a0a; }\n          .track-node.active .track-dot { box-shadow: 0 0 0 3px #0a0a0a, 0 0 0 5px rgba(220,38,38,0.35), 0 0 14px rgba(220,38,38,0.5); transform: scale(1.15); }\n          .track-label { display: flex; flex-direction: column; align-items: center; gap: 3px; }\n          .track-num { font-size: 9px; color: var(--text-faint); letter-spacing: 0.14em; }\n          .track-name { font-size: 11px; color: var(--text-faint); letter-spacing: 0.1em; text-transform: uppercase; transition: color 300ms ease; }\n          .track-node.active .track-name { color: var(--text); font-weight: 600; }\n          .track-node.past .track-name { color: var(--text-dim); }\n          .track-node.active .track-num { color: var(--accent); }\n          .foot { margin-top: auto; padding-top: 24px; font-size: 10px; letter-spacing: 0.2em; color: var(--text-faint); display: flex; justify-content: center; gap: 14px; border-top: 1px solid var(--border); padding-top: 18px; margin-top: 32px; }\n          .foot .dim { opacity: 0.5; }\n          @media (max-width: 720px) { .app { padding: 20px 20px 18px; } .info-title { font-size: 22px; } .info-title-row { flex-direction: column; align-items: flex-start; gap: 6px; } .track-name { font-size: 9px; } .track-num { display: none; } .controls { flex-direction: column; } .btn-primary, .btn-secondary { width: 100%; justify-content: center; } }\n        `}<\/style>\n      <\/div>\n    );\n  };\n\n  ReactDOM.createRoot(document.getElementById('koryo-belt-root')).render(<App\/>);\n<\/script>\n\n\n\n<style>\n  \/* ========================================== *\/\n  \/* FOOTER CSS (Ensures it looks good on ALL pages) *\/\n  \/* ========================================== *\/\n  .koryo-footer {\n    background: #050505;\n    color: #ffffff;\n    padding: 80px 5% 30px;\n    font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif;\n    border-top: 1px solid rgba(255, 255, 255, 0.05);\n  }\n\n  .koryo-footer__container {\n    max-width: 1300px;\n    margin: 0 auto;\n  }\n\n  \/* Grid Layout for Desktop *\/\n  .koryo-footer__grid {\n    display: grid;\n    grid-template-columns: 2fr 1fr 1fr 1fr;\n    gap: 50px;\n    margin-bottom: 60px;\n  }\n\n  \/* Brand Column *\/\n  .koryo-footer__brand-title {\n    font-size: 26px;\n    font-weight: 800;\n    margin: 0 0 15px 0;\n    letter-spacing: 1px;\n  }\n  .koryo-footer__brand-title span {\n    color: #dc2626;\n  }\n  .koryo-footer__tagline {\n    color: #a3a3a3;\n    font-size: 15px;\n    line-height: 1.6;\n    margin-bottom: 25px;\n    max-width: 350px;\n  }\n\n  \/* Social Icons *\/\n  .koryo-footer__socials {\n    display: flex;\n    gap: 12px;\n  }\n  .koryo-footer__social {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: 40px;\n    height: 40px;\n    background: rgba(255, 255, 255, 0.05);\n    border-radius: 8px;\n    color: #ffffff;\n    transition: all 0.3s ease;\n  }\n  .koryo-footer__social svg {\n    width: 20px;\n    height: 20px;\n  }\n  .koryo-footer__social:hover {\n    background: #dc2626;\n    transform: translateY(-3px);\n  }\n\n  \/* Columns (Programs, Locations, Club) *\/\n  .koryo-footer__col-title {\n    color: #ffffff;\n    font-size: 16px;\n    font-weight: 700;\n    text-transform: uppercase;\n    letter-spacing: 1px;\n    margin: 0 0 20px 0;\n  }\n  .koryo-footer__links {\n    list-style: none;\n    padding: 0;\n    margin: 0;\n    display: flex;\n    flex-direction: column;\n    gap: 12px;\n  }\n  .koryo-footer__link {\n    color: #a3a3a3;\n    text-decoration: none;\n    font-size: 14px;\n    transition: all 0.3s ease;\n    display: inline-block;\n  }\n  .koryo-footer__link:hover {\n    color: #dc2626;\n    transform: translateX(5px);\n  }\n\n  \/* Bottom Bar *\/\n  .koryo-footer__bottom {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    padding-top: 25px;\n    border-top: 1px solid rgba(255, 255, 255, 0.08);\n    color: #666666;\n    font-size: 13px;\n  }\n  .koryo-footer__bottom-links {\n    display: flex;\n    gap: 20px;\n    flex-wrap: wrap; \/* Added for Responsive UX *\/\n    justify-content: center; \/* Added for Responsive UX *\/\n  }\n  .koryo-footer__bottom-links a {\n    color: #666666;\n    text-decoration: none;\n    transition: color 0.3s;\n  }\n  .koryo-footer__bottom-links a:hover {\n    color: #ffffff;\n  }\n\n  \/* Responsive Mobile Layout *\/\n  @media (max-width: 900px) {\n    .koryo-footer__grid {\n      grid-template-columns: 1fr 1fr;\n    }\n  }\n  @media (max-width: 600px) {\n    .koryo-footer__grid {\n      grid-template-columns: 1fr;\n      gap: 40px;\n    }\n    .koryo-footer__bottom {\n      flex-direction: column;\n      gap: 15px;\n      text-align: center;\n    }\n  }\n<\/style>\n\n<footer class=\"koryo-footer\" aria-label=\"Footer\">\n  <div class=\"koryo-footer__container\">\n\n    <div class=\"koryo-footer__grid\">\n\n      <div>\n        <h3 class=\"koryo-footer__brand-title\">KORYO <span>TAEKWONDO<\/span><\/h3>\n        <p class=\"koryo-footer__tagline\">\n          Unleash your power. Master your mind. Elite Taekwondo training\n          across Geneva, Vaud, and Pays de Gex.\n        <\/p>\n        <div class=\"koryo-footer__socials\">\n          <a href=\"#\" class=\"koryo-footer__social\" aria-label=\"Instagram\">\n            <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n              <rect x=\"2\" y=\"2\" width=\"20\" height=\"20\" rx=\"5\"\/>\n              <path d=\"M16 11.37A4 4 0 1112.63 8 4 4 0 0116 11.37z\"\/>\n              <line x1=\"17.5\" y1=\"6.5\" x2=\"17.51\" y2=\"6.5\"\/>\n            <\/svg>\n          <\/a>\n          <a href=\"#\" class=\"koryo-footer__social\" aria-label=\"Facebook\">\n            <svg viewBox=\"0 0 24 24\" fill=\"currentColor\">\n              <path d=\"M18 2h-3a5 5 0 00-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 011-1h3z\"\/>\n            <\/svg>\n          <\/a>\n          <a href=\"#\" class=\"koryo-footer__social\" aria-label=\"YouTube\">\n            <svg viewBox=\"0 0 24 24\" fill=\"currentColor\">\n              <path d=\"M22.54 6.42a2.78 2.78 0 00-1.94-2C18.88 4 12 4 12 4s-6.88 0-8.6.46a2.78 2.78 0 00-1.94 2A29 29 0 001 11.75a29 29 0 00.46 5.33A2.78 2.78 0 003.4 19c1.72.46 8.6.46 8.6.46s6.88 0 8.6-.46a2.78 2.78 0 001.94-2 29 29 0 00.46-5.25 29 29 0 00-.46-5.33z\"\/>\n              <polygon points=\"9.75 15.02 15.5 11.75 9.75 8.48 9.75 15.02\" fill=\"#050505\"\/>\n            <\/svg>\n          <\/a>\n          <a href=\"#\" class=\"koryo-footer__social\" aria-label=\"WhatsApp\">\n            <svg viewBox=\"0 0 24 24\" fill=\"currentColor\">\n              <path d=\"M17.5 14c-.3-.1-1.7-.9-2-1-.3-.1-.5-.1-.7.1-.2.3-.7.9-.9 1.1-.2.2-.3.2-.6.1-1.4-.7-2.4-1.3-3.4-2.9-.3-.4.3-.4.8-1.3.1-.2.1-.3 0-.5 0-.1-.7-1.6-.9-2.2-.2-.6-.5-.5-.7-.5-.2 0-.4 0-.6 0s-.5.1-.8.4c-.3-1 1-1 2.5s1.1 2.9 1.2 3.1c.2.2 2.1 3.3 5.2 4.6.7.3 1.3.5 1.7.6.7.2 1.4.2 1.9.1.6-.1 1.7-.7 2-1.4.3-.6.3-1.2.2-1.4-.1-.2-.3-.2-.6-.4zM12 2a10 10 0 00-8.5 15.2L2 22l4.9-1.3A10 10 0 1012 2z\"\/>\n            <\/svg>\n          <\/a>\n        <\/div>\n      <\/div>\n\n      <div>\n        <h4 class=\"koryo-footer__col-title\">Programs<\/h4>\n        <ul class=\"koryo-footer__links\">\n          <li><a href=\"https:\/\/koryo.club\/taekfundo-class-for-children-age-4-to-6-years\/\" class=\"koryo-footer__link\">TaekFundo (4\u20136)<\/a><\/li>\n          <li><a href=\"https:\/\/koryo.club\/koryo-juniors-for-kids-ages-7-to-10\/\" class=\"koryo-footer__link\">Koryo Junior (7\u201310)<\/a><\/li>\n          <li><a href=\"https:\/\/koryo.club\/senior-taekwondo-class-for-age-10-to-15-years\/\" class=\"koryo-footer__link\">Koryo Seniors (10\u201315)<\/a><\/li>\n          <li><a href=\"https:\/\/koryo.club\/koryo-private\/\" class=\"koryo-footer__link\">Private Lessons<\/a><\/li>\n          <li><a href=\"https:\/\/koryo.club\/koryo-champs\/\" class=\"koryo-footer__link\">Koryo Champs<\/a><\/li>\n        <\/ul>\n      <\/div>\n\n      <div>\n        <h4 class=\"koryo-footer__col-title\">Locations<\/h4>\n        <ul class=\"koryo-footer__links\">\n          <li><a href=\"https:\/\/koryo.club\/the-best-taekwondo-school-in-versoix\/\" class=\"koryo-footer__link\">Versoix<\/a><\/li>\n          <li><a href=\"https:\/\/koryo.club\/koryo-gland-top-taekwondo-school\/\" class=\"koryo-footer__link\">Gland<\/a><\/li>\n          <li><a href=\"https:\/\/koryo.club\/top-taekwondo-instruction-for-all-koryo-taekwondo-club-in-geneva\/\" class=\"koryo-footer__link\">Geneva Champel<\/a><\/li>\n          <li><a href=\"https:\/\/koryo.club\/koryo-taekwondo-nations-geneva\/\" class=\"koryo-footer__link\">Geneva Nations<\/a><\/li>\n          <li><a href=\"https:\/\/koryo.club\/taekwondo-classes-gex\/\" class=\"koryo-footer__link\">Gex<\/a><\/li>\n          <li><a href=\"https:\/\/koryo.club\/koryo-taekwondo-saint-genis-pouilly\/\" class=\"koryo-footer__link\">Saint-Genis-Pouilly<\/a><\/li>\n          <li><a href=\"https:\/\/koryo.club\/koryo-taekwondo-ornex\/\" class=\"koryo-footer__link\">Ornex<\/a><\/li>\n        <\/ul>\n      <\/div>\n\n      <div>\n        <h4 class=\"koryo-footer__col-title\">Club<\/h4>\n        <ul class=\"koryo-footer__links\">\n          <li><a href=\"https:\/\/koryo.club\/#master\" class=\"koryo-footer__link\">Master Hamed<\/a><\/li>\n          <li><a href=\"https:\/\/koryo.club\/#why\" class=\"koryo-footer__link\">Why Koryo<\/a><\/li>\n          <li><a href=\"https:\/\/koryo.club\/#reviews\" class=\"koryo-footer__link\">Testimonials<\/a><\/li>\n          <li><a href=\"https:\/\/koryo.club\/#trial\" class=\"koryo-footer__link\">Free Trial<\/a><\/li>\n          <li><a href=\"https:\/\/koryo.club\/contact-us\/\" class=\"koryo-footer__link\">Contact<\/a><\/li>\n        <\/ul>\n      <\/div>\n\n    <\/div>\n\n    <div class=\"koryo-footer__bottom\">\n      <div>\u00a9 2026 Koryo Taekwondo Club. All rights reserved.<\/div>\n      <div class=\"koryo-footer__bottom-links\">\n        <a href=\"https:\/\/koryo.club\/privacy-policy\/\">Privacy Policy<\/a>\n        <a href=\"https:\/\/koryo.club\/terms-of-service\/\">Terms of Service<\/a>\n        <a href=\"https:\/\/koryo.club\/cookie-policy\/\">Cookies<\/a>\n        <!-- Added Wise Compliance Links Here -->\n        <a href=\"https:\/\/koryo.club\/refund-policy\/\">Refund Policy<\/a>\n        <a href=\"https:\/\/koryo.club\/delivery-policy\/\">Delivery Policy<\/a>\n      <\/div>\n    <\/div>\n\n  <\/div>\n<\/footer>\n","protected":false},"excerpt":{"rendered":"<p>L&rsquo;art de la paix et de la puissance Qu&rsquo;est-ce que le Taekwondo ? Un art martial cor\u00e9en classique, une discipline scientifique et un sport olympique mondial comptant plus de 70 millions de pratiquants \u00e0 travers le monde. TAE Pied \/ Coup de pied Frapper ou briser avec le pied. Il repr\u00e9sente les coups de pied &#8230; <a title=\"\u00c0 propos du taekwondo\" class=\"read-more\" href=\"https:\/\/koryo.club\/fr\/a-propos-du-taekwondo\/\" aria-label=\"En savoir plus sur \u00c0 propos du taekwondo\">Lire la suite<\/a><\/p>\n","protected":false},"author":2,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-8773","page","type-page","status-publish"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v26.6 (Yoast SEO v27.3) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Qu&#039;est-ce que le Taekwondo ? Histoire et Philosophie | Koryo Club<\/title>\n<meta name=\"description\" content=\"D\u00e9couvrez ce qu&#039;est le Taekwondo, ses 5000 ans d&#039;histoire et ses piliers fondamentaux comme le Kyorugi et le Poomsae. Rejoignez Ma\u00eetre Hamed au Koryo Club pour apprendre cet art martial.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/koryo.club\/fr\/a-propos-du-taekwondo\/\" \/>\n<meta property=\"og:locale\" content=\"fr_FR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"\u00c0 propos du taekwondo\" \/>\n<meta property=\"og:description\" content=\"D\u00e9couvrez ce qu&#039;est le Taekwondo, ses 5000 ans d&#039;histoire et ses piliers fondamentaux comme le Kyorugi et le Poomsae. Rejoignez Ma\u00eetre Hamed au Koryo Club pour apprendre cet art martial.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/koryo.club\/fr\/a-propos-du-taekwondo\/\" \/>\n<meta property=\"og:site_name\" content=\"Koryo Taekwondo Club\" \/>\n<meta property=\"article:modified_time\" content=\"2026-05-04T09:59:22+00:00\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Dur\u00e9e de lecture estim\u00e9e\" \/>\n\t<meta name=\"twitter:data1\" content=\"7 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/koryo.club\\\/fr\\\/a-propos-du-taekwondo\\\/\",\"url\":\"https:\\\/\\\/koryo.club\\\/fr\\\/a-propos-du-taekwondo\\\/\",\"name\":\"Qu'est-ce que le Taekwondo ? Histoire et Philosophie | Koryo Club\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/koryo.club\\\/fr\\\/#website\"},\"datePublished\":\"2022-09-13T21:13:38+00:00\",\"dateModified\":\"2026-05-04T09:59:22+00:00\",\"description\":\"D\u00e9couvrez ce qu'est le Taekwondo, ses 5000 ans d'histoire et ses piliers fondamentaux comme le Kyorugi et le Poomsae. Rejoignez Ma\u00eetre Hamed au Koryo Club pour apprendre cet art martial.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/koryo.club\\\/fr\\\/a-propos-du-taekwondo\\\/#breadcrumb\"},\"inLanguage\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/koryo.club\\\/fr\\\/a-propos-du-taekwondo\\\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/koryo.club\\\/fr\\\/a-propos-du-taekwondo\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/koryo.club\\\/fr\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"\u00c0 propos du taekwondo\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/koryo.club\\\/fr\\\/#website\",\"url\":\"https:\\\/\\\/koryo.club\\\/fr\\\/\",\"name\":\"Koryo Taekwondo Club\",\"description\":\"Cours de Taekwondo pour tous\",\"publisher\":{\"@id\":\"https:\\\/\\\/koryo.club\\\/fr\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/koryo.club\\\/fr\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"fr-FR\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/koryo.club\\\/fr\\\/#organization\",\"name\":\"koryo club\",\"url\":\"https:\\\/\\\/koryo.club\\\/fr\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\\\/\\\/koryo.club\\\/fr\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"\",\"contentUrl\":\"\",\"caption\":\"koryo club\"},\"image\":{\"@id\":\"https:\\\/\\\/koryo.club\\\/fr\\\/#\\\/schema\\\/logo\\\/image\\\/\"}}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Qu'est-ce que le Taekwondo ? Histoire et Philosophie | Koryo Club","description":"D\u00e9couvrez ce qu'est le Taekwondo, ses 5000 ans d'histoire et ses piliers fondamentaux comme le Kyorugi et le Poomsae. Rejoignez Ma\u00eetre Hamed au Koryo Club pour apprendre cet art martial.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/koryo.club\/fr\/a-propos-du-taekwondo\/","og_locale":"fr_FR","og_type":"article","og_title":"\u00c0 propos du taekwondo","og_description":"D\u00e9couvrez ce qu'est le Taekwondo, ses 5000 ans d'histoire et ses piliers fondamentaux comme le Kyorugi et le Poomsae. Rejoignez Ma\u00eetre Hamed au Koryo Club pour apprendre cet art martial.","og_url":"https:\/\/koryo.club\/fr\/a-propos-du-taekwondo\/","og_site_name":"Koryo Taekwondo Club","article_modified_time":"2026-05-04T09:59:22+00:00","twitter_card":"summary_large_image","twitter_misc":{"Dur\u00e9e de lecture estim\u00e9e":"7 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/koryo.club\/fr\/a-propos-du-taekwondo\/","url":"https:\/\/koryo.club\/fr\/a-propos-du-taekwondo\/","name":"Qu'est-ce que le Taekwondo ? Histoire et Philosophie | Koryo Club","isPartOf":{"@id":"https:\/\/koryo.club\/fr\/#website"},"datePublished":"2022-09-13T21:13:38+00:00","dateModified":"2026-05-04T09:59:22+00:00","description":"D\u00e9couvrez ce qu'est le Taekwondo, ses 5000 ans d'histoire et ses piliers fondamentaux comme le Kyorugi et le Poomsae. Rejoignez Ma\u00eetre Hamed au Koryo Club pour apprendre cet art martial.","breadcrumb":{"@id":"https:\/\/koryo.club\/fr\/a-propos-du-taekwondo\/#breadcrumb"},"inLanguage":"fr-FR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/koryo.club\/fr\/a-propos-du-taekwondo\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/koryo.club\/fr\/a-propos-du-taekwondo\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/koryo.club\/fr\/"},{"@type":"ListItem","position":2,"name":"\u00c0 propos du taekwondo"}]},{"@type":"WebSite","@id":"https:\/\/koryo.club\/fr\/#website","url":"https:\/\/koryo.club\/fr\/","name":"Koryo Taekwondo Club","description":"Cours de Taekwondo pour tous","publisher":{"@id":"https:\/\/koryo.club\/fr\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/koryo.club\/fr\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"fr-FR"},{"@type":"Organization","@id":"https:\/\/koryo.club\/fr\/#organization","name":"koryo club","url":"https:\/\/koryo.club\/fr\/","logo":{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/koryo.club\/fr\/#\/schema\/logo\/image\/","url":"","contentUrl":"","caption":"koryo club"},"image":{"@id":"https:\/\/koryo.club\/fr\/#\/schema\/logo\/image\/"}}]}},"_links":{"self":[{"href":"https:\/\/koryo.club\/fr\/wp-json\/wp\/v2\/pages\/8773","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/koryo.club\/fr\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/koryo.club\/fr\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/koryo.club\/fr\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/koryo.club\/fr\/wp-json\/wp\/v2\/comments?post=8773"}],"version-history":[{"count":5,"href":"https:\/\/koryo.club\/fr\/wp-json\/wp\/v2\/pages\/8773\/revisions"}],"predecessor-version":[{"id":11111,"href":"https:\/\/koryo.club\/fr\/wp-json\/wp\/v2\/pages\/8773\/revisions\/11111"}],"wp:attachment":[{"href":"https:\/\/koryo.club\/fr\/wp-json\/wp\/v2\/media?parent=8773"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}