/* ══ Le chemin : l'arbre des techniques sur téléphone (Jason, 13/10/2026) ═══════════════════════════
   « Sur mobile, on ne comprend pas où est-ce qu'on est, ce qu'on fait. » Sous 721 px de large, la page
   ne s'ouvre plus sur la scène 3D : elle s'ouvre sur un chemin qui monte, une étape par grade, « Tu es
   ici » sur le grade du lecteur, les techniques rangées par famille avec leur photo. La 3D devient la
   vue d'ensemble (bascule 3D / 2D en haut), et la fiche d'une technique est la même feuille partout.
   Maquettes : canevas « Arbre sur mobile », rangées « C · Le chemin » (sombre) et « C · Le chemin, en
   clair ». Tout est construit par arbre/chemin.js dans .chm. Au-dessus de 720 px, rien ne change.

   Ici : la structure et le SOMBRE (formes de l'app en sombre : actions en hexagone, feuille à angles
   nets). Le CLAIR vit dans css/clarte.css, sous :root[data-theme="light"], comme tout le clair.

   Deux vues, deux mises en page :
   - le chemin (2D) est une page ordinaire, c'est le DOCUMENT qui défile (dans la WebView de l'app, un
     défileur interne perd l'inertie d'iOS : voir js/gk-shell.js) ; la barre, le titre et la feuille
     sont fixes ;
   - la vue d'ensemble (3D) reprend le plein écran de la scène : .content fixe, le cadre entre le
     titre et l'aide. */

.chm{display:none}

@media (max-width:720px){
  .gk-arbre-v3.chm-on .ax-overlay{display:none}
  .gk-arbre-v3.chm-on{
    /* --chm-haut : le haut de la barre. Dans l'app, sous l'encoche, à la hauteur du bouton retour que
       l'app pose par-dessus la page ; sur le site, à la hauteur du logo et du menu.
       --chm-pousse : ce que la page a déjà poussé au-dessus du contenu (64 px sur le site).
       --gk-preprod : la hauteur du bandeau de préprod (js/gk-preprod.js), absent en prod. */
    --chm-haut:calc(env(safe-area-inset-top,0px) + 15px + var(--gk-preprod,0px));
    --chm-pousse:calc(64px + var(--gk-preprod,0px));
  }
  html.gk-app .gk-arbre-v3.chm-on{--chm-haut:calc(env(safe-area-inset-top,0px) + 6px + var(--gk-preprod,0px));--chm-pousse:var(--gk-preprod,0px)}

  /* le chemin : une page qui défile (les deux règles défont le plein écran de la scène, sur le site et dans l'app) */
  .content.gk-arbre-v3.chm-on:not(.chm-vue-3d){height:auto!important;min-height:calc(100vh - 80px);overflow:visible!important}
  html.gk-app .content.gk-arbre-v3.chm-on:not(.chm-vue-3d){position:relative!important;inset:auto!important;min-height:100vh}
  /* la vue d'ensemble : le plein écran, sur le site comme dans l'app */
  .content.gk-arbre-v3.chm-on.chm-vue-3d{position:fixed!important;inset:0!important;z-index:5;width:auto!important;max-width:none!important;
    height:auto!important;margin:0!important;background:#0B0E1A}
  body.chm-fige{overflow:hidden!important}
  html.gk-app:has(body.chm-fige){overflow:hidden!important}

  .gk-arbre-v3.chm-on .chm{display:block;position:relative;z-index:7;min-height:inherit;
    background:#0B0E1A;color:#F2F4FA;font-family:'Inter',system-ui,sans-serif;-webkit-tap-highlight-color:transparent}
  /* la feuille passe au-dessus du logo et du menu du site (1002) */
  .gk-arbre-v3.chm-on.chm-feuille-ouverte .chm{z-index:1100}
  /* :where() : cette remise à zéro ne pèse rien, toute classe du chemin passe devant */
  :where(.chm) button{appearance:none;-webkit-appearance:none;border:0;border-radius:0;margin:0;padding:0;background:none;box-shadow:none;font:inherit;color:inherit;cursor:pointer;text-align:inherit}
  :where(.chm) a{color:inherit;text-decoration:none}
  .chm [hidden]{display:none!important}
  .chm svg{display:block;flex:none}
  .chm p{text-align:start}
  html[lang="ko"] .chm{word-break:keep-all}

  /* ── La barre : bascule 3D / 2D et recherche. Dans l'app elle se range à droite, le bouton retour de
        l'app et son mot occupent la gauche ; sur le site elle tient entre le logo et le menu. ── */
  .chm-barre{position:fixed;left:66px;right:66px;top:var(--chm-haut);height:40px;z-index:5;
    display:flex;align-items:center;justify-content:center;gap:10px;pointer-events:none}
  html.gk-app .chm-barre{left:auto;right:16px;justify-content:flex-end;gap:12px}
  /* « 3D », « 2D » et la loupe ne se lisent pas : la barre garde son ordre dans une langue écrite de droite à gauche */
  .chm-barre{direction:ltr}
  .chm-barre > *{pointer-events:auto}
  .chm-o{display:block;flex:none}
  /* la touche : le bouton d'icône de l'app en sombre (hexagone 48 × 40, pointes de 12, trait qui suit la forme) */
  .chm-t{--hx:12px;position:relative;width:48px;height:40px;flex:none;display:flex;align-items:center;justify-content:center;
    color:#EAE6DE;background:rgba(255,255,255,.18);
    clip-path:polygon(var(--hx) 0,calc(100% - var(--hx)) 0,100% 50%,calc(100% - var(--hx)) 100%,var(--hx) 100%,0 50%)}
  .chm-t::before{content:'';position:absolute;inset:1px;z-index:0;
    background:linear-gradient(rgba(255,255,255,.08),rgba(255,255,255,.08)),rgba(12,16,30,.92);
    clip-path:polygon(11.2px 0,calc(100% - 11.2px) 0,100% 50%,calc(100% - 11.2px) 100%,11.2px 100%,0 50%)}
  .chm-t svg{position:relative;z-index:1}
  /* la bascule : les deux hexagones de l'arbre, celui de la vue ouverte en satin */
  .chm-seg{display:flex;gap:6px}
  .chm-sg{--hx:14px;position:relative;width:62px;height:40px;display:flex;align-items:center;justify-content:center;
    font:italic 800 15px/1 'Inter Tight','Inter',sans-serif;color:rgba(255,255,255,.62);background:rgba(255,255,255,.18);
    clip-path:polygon(var(--hx) 0,calc(100% - var(--hx)) 0,100% 50%,calc(100% - var(--hx)) 100%,var(--hx) 100%,0 50%)}
  .chm-sg::before{content:'';position:absolute;inset:1px;z-index:0;background:rgba(12,16,30,.92);
    clip-path:polygon(13.2px 0,calc(100% - 13.2px) 0,100% 50%,calc(100% - 13.2px) 100%,13.2px 100%,0 50%)}
  .chm-sg span{position:relative;z-index:1}
  .chm-sg.on{color:#0B0E1A;background:linear-gradient(115deg,#8A6A2F 0 18%,#F7EFDC 34%,#C8AA6E 52%,#E4CE9B 74%,#8A6A2F 92%)}
  .chm-sg.on::before{display:none}

  /* ── L'en-tête, fixe : le titre, puis où j'en suis (2D) ou ce qu'est l'arbre (3D) ── */
  .chm-tete{position:fixed;left:0;right:0;top:calc(var(--chm-haut) + 52px);z-index:4;padding:0 20px;pointer-events:none}
  .chm-titre{margin:0;font:italic 700 30px/1 'GT Sectra Display',Georgia,serif;color:#F2F4FA;letter-spacing:0}
  .chm-etats{display:flex;flex-wrap:wrap;gap:6px 18px;margin:14px 0 0;padding:0}
  .chm-etats span{display:flex;align-items:baseline;gap:6px;font:500 12px/1 'Inter',sans-serif;color:rgba(255,255,255,.62)}
  .chm-etats b{font:italic 800 17px/1 'Inter Tight','Inter',sans-serif;color:#F2F4FA}
  .chm-etats .is-ici b{color:#E4CE9B}
  .chm-etats .is-apres b{color:rgba(255,255,255,.5)}
  .chm-sous{display:none;margin:14px 0 0;font:500 13px/1.2 'Inter',sans-serif;color:rgba(255,255,255,.62)}
  /* le voile sous l'en-tête : plein jusqu'au bas des nombres, puis le chemin revient */
  .chm-voile-haut{position:fixed;left:0;right:0;top:0;height:calc(var(--chm-haut) + 156px);z-index:3;pointer-events:none;
    background:linear-gradient(180deg,#0B0E1A 0%,#0B0E1A calc(100% - 34px),rgba(11,14,26,0) 100%)}
  .chm.chm-sans-grade .chm-voile-haut{height:calc(var(--chm-haut) + 124px)}

  /* ── Le chemin ── */
  .chm-corps{padding-top:calc(var(--chm-haut) + 150px - var(--chm-pousse))}
  .chm.chm-sans-grade .chm-corps{padding-top:calc(var(--chm-haut) + 118px - var(--chm-pousse))}
  .chm-voie{position:relative;list-style:none;margin:0;padding:8px 0 calc(64px + env(safe-area-inset-bottom,0px))}
  .chm-voie::before{content:'';position:absolute;inset-inline-start:40px;top:0;bottom:0;width:1px;
    background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(200,170,110,.6) 90px,rgba(200,170,110,.6) calc(100% - 160px),rgba(255,255,255,.2))}
  /* une étape montée sous l'en-tête par un défilement s'arrête juste dessous (en préprod le bandeau ajoute déjà sa
     hauteur par scroll-padding-top : on la retire ici pour ne pas la compter deux fois) */
  .chm-etape{position:relative;padding:0 20px 36px;padding-inline-start:72px;scroll-margin-top:calc(var(--chm-haut) + 158px - var(--gk-preprod,0px))}
  .chm.chm-sans-grade .chm-etape{scroll-margin-top:calc(var(--chm-haut) + 126px - var(--gk-preprod,0px))}
  .chm-h{margin:0;font:inherit}
  .chm-rang{position:relative;display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;min-height:28px}
  /* la marque de l'étape, posée sur la ligne : un hexagone au trait, la pierre de la ceinture dedans */
  .chm-marque{--hx:7px;position:absolute;inset-inline-start:-45px;top:2px;width:26px;height:24px;display:flex;align-items:center;justify-content:center;
    background:rgba(255,255,255,.3);
    clip-path:polygon(var(--hx) 0,calc(100% - var(--hx)) 0,100% 50%,calc(100% - var(--hx)) 100%,var(--hx) 100%,0 50%)}
  .chm-marque::before{content:'';position:absolute;inset:1px;background:#0B0E1A;
    clip-path:polygon(6.4px 0,calc(100% - 6.4px) 0,100% 50%,calc(100% - 6.4px) 100%,6.4px 100%,0 50%)}
  .chm-marque .gem{position:relative}
  .chm-noms{display:block;min-width:0}
  .chm-nom{display:block;font:italic 700 20px/1 'GT Sectra Display',Georgia,serif;color:#F2F4FA}
  .chm-etat{display:flex;align-items:center;gap:7px;flex:none;font:500 12.5px/1 'Inter',sans-serif;color:rgba(255,255,255,.62)}
  .chm-etape.is-apres .chm-nom{color:rgba(255,255,255,.55)}
  .chm-etape.is-apres .chm-etat{color:rgba(255,255,255,.45)}
  .chm-etape.is-fait .chm-etat svg{color:#C8AA6E}
  /* l'étape où je suis : marque pleine, « Tu es ici » au-dessus du grade, en grand */
  .chm-etape.is-ici .chm-rang{align-items:flex-end;min-height:46px}
  .chm-etape.is-ici .chm-marque{--hx:9px;inset-inline-start:-49px;top:11px;width:34px;height:30px;background:linear-gradient(150deg,#F6E4B0,#E3C378 44%,#C8A45A)}
  .chm-etape.is-ici .chm-marque::before{display:none}
  .chm-etape.is-ici .chm-nom{font-size:30px}
  .chm-etape.is-ici .chm-etat{padding-bottom:5px}
  .chm-ici{display:block;margin-bottom:7px;font:700 9px/1 'Inter',sans-serif;letter-spacing:.16em;text-transform:uppercase;color:#C8AA6E}

  /* la pierre de ceinture : celle de la frise des grades (.gem d'arbre/index.html) */
  .chm .gem{display:block;width:8px;height:8px;flex:none;transform:rotate(45deg);border-radius:2px;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 0 0 1px rgba(0,0,0,.25)}
  .chm .gem.tkd-dan{border:1px solid #C8AA6E;box-sizing:border-box;box-shadow:none;border-radius:0}
  .chm-etape.is-ici .chm-marque .gem{width:11px;height:11px}

  /* ── Les familles d'un grade : un nom, une rangée de photos qui glisse ── */
  .chm-familles{padding-top:18px}
  .chm-fam + .chm-fam{margin-top:22px}
  .chm-fam-t{display:flex;align-items:baseline;gap:8px;margin:0;font:italic 800 14px/1 'Inter Tight','Inter',sans-serif;color:#E4CE9B}
  /* le site force ses h1 à h3 en GT Sectra : ce petit titre garde la police des libellés */
  .chm .chm-fam-t{font-family:'Inter Tight','Inter',sans-serif!important;font-weight:800!important;font-style:italic!important}
  .chm-fam-t small{font:700 9.5px/1 'Inter',sans-serif;letter-spacing:.16em;text-transform:uppercase;color:#8C857A}
  .chm-rail{display:flex;align-items:flex-start;gap:10px;margin:10px 0 0;margin-inline-end:-20px;padding:0;padding-inline-end:20px;overflow-x:auto;overflow-y:hidden;
    scrollbar-width:none;-webkit-overflow-scrolling:touch;scroll-snap-type:x proximity}
  .chm-rail::-webkit-scrollbar{display:none}
  .chm-tuile{display:block;width:84px;flex:none;scroll-snap-align:start}
  .chm-tuile img,.chm-tuile .chm-sans{display:block;width:84px;height:84px;object-fit:cover}
  .chm-sans{display:flex!important;align-items:center;justify-content:center;box-sizing:border-box;padding:6px;text-align:center;
    background:rgba(255,255,255,.05);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1);
    font:600 9px/1.25 'Inter',sans-serif;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.34)}
  .chm-tuile > span:last-child{display:block;margin-top:7px;font:italic 800 11.5px/1.16 'Inter Tight','Inter',sans-serif;color:#F2F4FA}
  .chm-etape.is-apres .chm-tuile img{filter:saturate(.55) brightness(.8)}

  /* ── La vue d'ensemble : le titre reste, le chemin se retire, la scène prend la place jusqu'à l'aide.
        La scène et la page ont la même nuit : les bords du cadre se fondent. ── */
  .chm-aide{display:none;position:fixed;left:20px;right:20px;bottom:calc(46px + env(safe-area-inset-bottom,0px));z-index:4}
  .chm-aide p{margin:0;font:600 13.5px/1.3 'Inter',sans-serif;color:#F0E6D2}
  .chm-aide div{display:flex;flex-wrap:wrap;gap:8px 16px;margin-top:9px;font:500 11.5px/1 'Inter',sans-serif;color:rgba(255,255,255,.62)}
  .chm-aide span{display:flex;align-items:center;gap:6px}
  .chm-aide svg{color:#C8AA6E}
  .gk-arbre-v3.chm-on .arbre-stage{display:none}
  .gk-arbre-v3.chm-on.chm-vue-3d .chm{position:absolute;inset:0;min-height:0;background:transparent;pointer-events:none}
  .gk-arbre-v3.chm-on.chm-vue-3d .chm-corps,
  .gk-arbre-v3.chm-on.chm-vue-3d .chm-etats,
  .gk-arbre-v3.chm-on.chm-vue-3d .chm-voile-haut{display:none!important}
  .gk-arbre-v3.chm-on.chm-vue-3d .chm-sous{display:block}
  .gk-arbre-v3.chm-on.chm-vue-3d .chm-aide{display:block}
  .gk-arbre-v3.chm-on.chm-vue-3d .arbre-stage{display:block;position:absolute;inset:auto;left:0;right:0;width:auto;height:auto;
    top:calc(var(--chm-haut) + 122px);bottom:calc(112px + env(safe-area-inset-bottom,0px));background:#0B0E1A;
    -webkit-mask-image:linear-gradient(180deg,transparent,#000 26px,#000 calc(100% - 26px),transparent);
    mask-image:linear-gradient(180deg,transparent,#000 26px,#000 calc(100% - 26px),transparent)}

  /* ── La feuille d'une technique : la même en 2D et en 3D ── */
  .chm-voile{position:fixed;inset:0;z-index:8;background:rgba(8,11,20,.62);opacity:0;transition:opacity .26s ease;pointer-events:auto}
  .chm-voile.on{opacity:1}
  .chm-f{position:fixed;left:0;right:0;bottom:0;z-index:9;pointer-events:auto;
    transform:translateY(104%);transition:transform .34s cubic-bezier(.2,.8,.2,1);touch-action:pan-y}
  .chm-f.on{transform:none}
  .chm-f.glisse{transition:none}
  .chm-feuille{position:relative;box-sizing:border-box;max-height:calc(100vh - 96px);
    padding:26px 16px calc(26px + env(safe-area-inset-bottom,0px));overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;
    background:linear-gradient(125deg,rgba(255,255,255,.10),rgba(255,255,255,.04) 46%,rgba(255,255,255,.06)),#10141F;
    border-top:1px solid rgba(255,255,255,.26);box-shadow:0 -24px 48px -12px rgba(0,0,0,.6)}
  /* l'équerre de la carte du sombre (10 × 1, blanc à 60 %) et la poignée */
  .chm-feuille::before{content:'';position:absolute;left:0;top:-1px;width:10px;height:10px;
    border-top:1px solid rgba(242,244,250,.6);border-left:1px solid rgba(242,244,250,.6)}
  .chm-feuille::after{content:'';position:absolute;left:50%;top:8px;width:36px;height:4px;margin-left:-18px;background:rgba(255,255,255,.3)}
  /* la photo d'une technique est carrée, elle le reste (Jason, 15/10) : une photo prend la largeur en carré, deux se
     la partagent en deux carrés ; la feuille grandit d'autant et défile si l'écran est court */
  .chm-photo{position:relative;height:auto;margin:0;display:flex;gap:2px;background:#0B0E1A}
  .chm-photo img{flex:1;min-width:0;width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;display:block}
  .chm-photo .chm-sans{flex:1;width:auto;height:auto;aspect-ratio:1/1}
  .chm-photo figcaption{position:absolute;inset-inline-start:8px;bottom:8px;padding:5px 8px;background:rgba(8,11,20,.7);
    font:700 9px/1 'Inter',sans-serif;letter-spacing:.14em;text-transform:uppercase;color:#F2F4FA}
  .chm-photo .chm-o{position:absolute;inset-inline-end:10px;top:10px}
  .chm-fermer{width:43px;height:36px}
  .chm-place{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:14px;min-height:10px}
  .chm-place small{font:700 9.5px/1 'Inter',sans-serif;letter-spacing:.16em;text-transform:uppercase;color:#8C857A}
  .chm-points{display:flex;gap:9px;padding-inline-end:3px}
  .chm-points i{display:block;width:6px;height:6px;transform:rotate(45deg);background:rgba(255,255,255,.22)}
  .chm-points i.on{background:#C8AA6E}
  .chm-f-nom{margin:12px 0 0;font:italic 700 32px/1.04 'GT Sectra Display',Georgia,serif;color:#F2F4FA}
  .chm-f-meta{display:flex;align-items:center;flex-wrap:wrap;gap:6px 9px;margin:11px 0 0;font:500 14px/1.1 'Inter',sans-serif;color:rgba(255,255,255,.62)}
  .chm-f-meta .gem{width:12px;height:12px;margin:0 3px 0 2px}
  .chm-f-meta b{font-weight:600;color:#F2F4FA}
  .chm-f-meta i{display:block;width:4px;height:4px;transform:rotate(45deg);background:#C8AA6E}
  /* l'action du sombre : l'hexagone allongé en satin or */
  .chm-cta-o{display:block;margin-top:22px}
  .chm-cta{--hx:16px;display:flex;align-items:center;justify-content:center;gap:10px;width:100%;height:48px;
    font:700 15px/1 'Inter',sans-serif;color:#0B0E1A;
    background:linear-gradient(115deg,#8A6A2F 0 18%,#F7EFDC 34%,#C8AA6E 52%,#E4CE9B 74%,#8A6A2F 92%);
    clip-path:polygon(var(--hx) 0,calc(100% - var(--hx)) 0,100% 50%,calc(100% - var(--hx)) 100%,var(--hx) 100%,0 50%)}
  .chm a.chm-cta{color:#0B0E1A}
  html[dir="rtl"] .chm-cta svg{transform:scaleX(-1)}

  /* ── La recherche : ouverte par la loupe, elle prend la place du titre ── */
  .chm-cherche{position:fixed;left:16px;right:16px;top:calc(var(--chm-haut) + 50px);z-index:6}
  .chm-cherche::before{content:'';position:fixed;inset:0;z-index:-1;background:rgba(8,11,20,.86)}
  .gk-arbre-v3.chm-cherche-ouverte .chm-tete{visibility:hidden}
  .gk-arbre-v3.chm-cherche-ouverte.chm-vue-3d .chm{pointer-events:auto}
  .chm-champ{--hx:12px;position:relative;display:flex;align-items:center;gap:9px;height:44px;padding:0 17px;color:#C8AA6E;
    background:rgba(255,255,255,.19);
    clip-path:polygon(var(--hx) 0,calc(100% - var(--hx)) 0,100% 50%,calc(100% - var(--hx)) 100%,var(--hx) 100%,0 50%)}
  .chm-champ::before{content:'';position:absolute;inset:1px;z-index:0;background:#0C1020;
    clip-path:polygon(11.2px 0,calc(100% - 11.2px) 0,100% 50%,calc(100% - 11.2px) 100%,11.2px 100%,0 50%)}
  .chm-champ > *{position:relative;z-index:1}
  /* 16 px : en dessous, Safari zoome la page quand on entre dans le champ */
  .content.gk-arbre-v3 .chm .chm-champ input[type="search"]{flex:1;min-width:0;width:auto;height:auto!important;border:0!important;outline:0!important;border-radius:0!important;background:transparent!important;
    box-shadow:none!important;padding:0!important;margin:0!important;font:500 16px/1.2 'Inter',sans-serif!important;color:#F2F4FA!important;-webkit-appearance:none;appearance:none}
  .content.gk-arbre-v3 .chm .chm-champ input[type="search"]::placeholder{color:rgba(255,255,255,.42)!important}
  .chm-champ input::-webkit-search-cancel-button{display:none}
  .chm-res-o{display:block;margin-top:8px}
  .chm-res{max-height:min(56vh,420px);overflow:auto;overscroll-behavior:contain;background:#0C1020;box-shadow:inset 0 0 0 1px rgba(255,255,255,.11)}
  .chm-res:empty{display:none}
  .chm-r{display:flex!important;align-items:center;justify-content:space-between;gap:12px;width:100%;box-sizing:border-box;padding:13px 14px;
    font:500 14px/1.2 'Inter',sans-serif;color:#F2F4FA}
  .chm-r + .chm-r{border-top:1px solid rgba(255,255,255,.08)}
  .chm-r small{flex:none;font:italic 700 11px/1 'Inter Tight','Inter',sans-serif;color:#C8AA6E}
  .chm-vide-res{margin:0;padding:14px;font:500 13px/1.3 'Inter',sans-serif;color:rgba(255,255,255,.5)}

  @media (prefers-reduced-motion:reduce){
    .chm-f,.chm-voile{transition:none}
  }
}