/* ==========================================================================
   Page /aiki-chokkan-teki — la charte (préambule, 18 sections, devise).
   Uniquement des compléments aux composants de site.css, en jetons du design system.
   ========================================================================== */

/* ——— En-tête ——— */
.act-page-head .page-head-text{grid-column:1 / span 7}
.act-title > span{display:block}
.act-title .dot{color:var(--shu-ink)}
.act-title > span:nth-child(3){padding-left:.42em}
.act-title > span:nth-child(4){padding-left:.84em}
.act-kicker{font:italic 500 clamp(1.3rem,1.05rem + .9vw,1.9rem)/1.2 var(--f-display);letter-spacing:0;color:var(--sumi-3);margin-bottom:.3em}
.act-sign{display:flex;align-items:center;gap:var(--s-4);padding-top:var(--s-4);border-top:1px solid var(--rule);max-width:32em}
.act-sign .act-sign-marks{width:74px;height:auto;flex-shrink:0}
.act-sign p{font-size:.9375rem;line-height:1.5;color:var(--sumi-2)}
.act-sign a{color:var(--sumi);font-weight:600;text-decoration:none;border-bottom:1px solid var(--rule-strong);transition:border-color .2s,color .2s}
.act-sign a:hover{color:var(--shu-ink);border-color:var(--shu)}
.act-hero{grid-column:8 / span 5;align-self:center;max-width:460px}
.act-page-head .eyebrow .num{color:var(--sumi-3)}

/* ——— Sommaire : Préambule = 00, puis 01 à 18 comme la charte ——— */
.act-toc ol{counter-reset:toc -1}
.act-toc ol a{padding:5px 0}

/* ——— Sections ——— */
.act-sec{padding-block:clamp(48px,5vw,88px);border-top:1px solid var(--rule)}
.act-sec--first{padding-top:0;border-top:0}
.act-sec > * + *{margin-top:var(--s-5)}
.act-sec p{color:var(--sumi-2);max-width:var(--measure)}
.act-sec .lead-serif{color:var(--sumi);max-width:30em}
.act-head{margin-bottom:var(--s-6)}
.act-h2{font:500 clamp(2rem,1.5rem + 1.7vw,3.1rem)/1.05 var(--f-display);letter-spacing:-.012em;text-wrap:balance}
.act-n{display:flex;align-items:center;gap:var(--s-3);margin-bottom:var(--s-3);font:italic 500 1.25rem/1 var(--f-display);color:var(--shu-ink);font-variant-numeric:lining-nums}
.act-n::after{content:"";width:28px;height:1px;background:var(--rule-strong)}
.act-h3{font:600 clamp(1.35rem,1.2rem + .5vw,1.6rem)/1.2 var(--f-display);color:var(--sumi);margin-bottom:var(--s-2)}
.act-sn{font-style:italic;font-weight:500;color:var(--sumi-3);margin-right:.2em;font-variant-numeric:lining-nums}
.act-sec > .act-sub + .act-sub,.act-principle + .act-sub{margin-top:var(--s-7)}
.act-cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-5) var(--s-6);margin-top:var(--s-6);padding-top:var(--s-5);border-top:1px solid var(--rule)}
.act-kanji{font-size:.875em;letter-spacing:.1em;color:var(--sumi-3);margin-inline:.15em}
dfn{font-style:normal}
.act-cap-k{font:600 var(--fs-xs)/1.3 var(--f-text);letter-spacing:.16em;text-transform:uppercase;color:var(--sumi-3)}

/* Principe (figure du principe + chaîne) */
.act-principle{margin-top:var(--s-6)}
.act-principle .principle-art{margin:var(--s-4) 0 var(--s-4)}
.act-principle figcaption{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--s-2) var(--s-5);padding-top:var(--s-4);border-top:1px solid var(--rule)}
.act-principle .chain{color:var(--sumi)}

/* Frises « A → B » illustrées */
.act-flow{margin-top:var(--s-6)}
.act-flow .chain-art{margin-bottom:var(--s-4)}
.act-steps > li{min-width:0;padding-right:var(--s-3)}
.act-steps > li + li{padding-left:var(--s-4)}
.act-steps strong{font-size:1.25rem;hyphens:auto;overflow-wrap:break-word}
.act-teach .chain{padding-top:var(--s-4);border-top:1px solid var(--sumi);color:var(--sumi)}

/* Figure + texte */
.act-media{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:var(--s-5) var(--s-7);align-items:center}
.act-media--art-first{grid-template-columns:minmax(0,.8fr) minmax(0,1.5fr)}
.act-media-text > * + *{margin-top:var(--s-4)}
.act-media-art svg{width:100%;height:auto}
.act-salut{max-width:260px;justify-self:end;padding-right:8px}
.act-trois-fig{max-width:320px;justify-self:end}
.act-socle-fig{max-width:300px;justify-self:end}
.act-media--art-first .act-media-art{max-width:220px}
.act-duo{margin-top:var(--s-6)!important}
.act-duo h3 span{font-style:italic}
.act-duo p{max-width:none}

/* Notion d’Aiki */
.act-legend{padding-top:var(--s-4);border-top:1px solid var(--rule)}
.act-levels-k{margin-top:var(--s-6)!important}
.act-sec .act-levels{margin-top:var(--s-3)}
@media (min-width:901px){
  .act-levels .level{padding-right:var(--s-5)}
  .act-levels .level + .level{padding-left:var(--s-5)}
  .page-act .act-levels .level .ink-level{width:min(100%,224px);margin-inline:0 auto}
}
/* Colonne étroite (sommaire latéral, 961–1280 px : « Transformation » ne tient pas en tiers de colonne) ou pleine largeur
   tablette (641–900 px) : figure à gauche, texte à droite. Figure ≥ 214 px pour garder ses libellés à 18 px au moins. */
@media (min-width:961px) and (max-width:1280px),(min-width:641px) and (max-width:900px){
  .act-levels{grid-template-columns:1fr}
  .act-levels .level,.act-levels .level + .level{display:grid;grid-template-columns:clamp(214px,36%,260px) minmax(0,1fr);column-gap:var(--s-6);align-content:center;padding:var(--s-5) 0;border-left:0}
  .act-levels .level + .level{border-top:1px solid var(--rule)}
  .page-act .act-levels .level .ink-level{grid-row:1 / span 3;width:100%;margin:0}
}
.act-levels .level p:last-child{max-width:none}

/* Listes de mots (qualités, critères) */
.act-words{--sep:calc(1.4em + 7px);display:flex;flex-wrap:wrap;align-items:center;row-gap:var(--s-2);margin-left:calc(-1 * var(--sep));clip-path:inset(-.5em -1em -.5em var(--sep));font:italic 500 clamp(1.25rem,1.1rem + .5vw,1.55rem)/1.35 var(--f-display);color:var(--sumi)}
.act-words li{display:inline-flex;align-items:center}
.act-words li::before{content:"";flex-shrink:0;width:7px;height:7px;margin-inline:.7em;background:var(--ink-blot) center/contain no-repeat;opacity:.55}

/* Énumérations en trois temps (technique, tradition) */
.act-trio{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--sumi)}
.act-trio > li{padding:var(--s-4) var(--s-5) var(--s-2) 0;font:500 clamp(1.3rem,1.15rem + .5vw,1.6rem)/1.25 var(--f-display);color:var(--sumi)}
.act-trio > li + li{padding-left:var(--s-5);border-left:1px solid var(--rule)}
.act-trio-k{display:block;margin-bottom:var(--s-2);font:italic 500 1.125rem/1 var(--f-display);color:var(--shu-ink);font-variant-numeric:lining-nums}
.act-trio--wide > li{font-size:clamp(1.2rem,1.1rem + .4vw,1.45rem);color:var(--sumi-2)}
.act-trio--wide strong{font-weight:600;color:var(--sumi)}

/* Vitesse */
.act-speed{margin-top:var(--s-6)!important}

/* Armes */
.act-weapons{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-4) var(--s-7);padding-block:var(--s-2) var(--s-3)}
.act-weapon svg{width:100%;height:auto}
.act-weapon-k{margin-top:var(--s-2);font:italic 500 1.25rem/1.2 var(--f-display);color:var(--sumi)!important}

/* Progression : escalier (cinq marches qui montent) */
.act-stairs{display:grid;border-top:1px solid var(--sumi)}
.act-stairs > li{display:grid;grid-template-columns:64px minmax(0,1fr);column-gap:var(--s-4);padding-block:var(--s-4);margin-left:calc(var(--i) * 14px);border-bottom:1px solid var(--rule)}
.act-stairs .ink-prog{grid-row:1 / span 3;width:64px;height:64px}
.act-stairs h3{font:500 clamp(1.5rem,1.3rem + .7vw,1.9rem)/1.1 var(--f-display);margin-block:2px 4px}
.act-stairs p:last-child{font-size:.9375rem;line-height:1.6}
@media (min-width:1101px),(min-width:700px) and (max-width:960px){
  .act-stairs{grid-template-columns:repeat(5,minmax(0,1fr));align-items:start;border-top:0;padding-top:var(--s-2)}
  .act-stairs > li{position:relative;display:flex;flex-direction:column;gap:var(--s-1);margin:calc((4 - var(--i)) * 44px) 0 0;padding:var(--s-4) var(--s-4) 0 var(--s-3);border-bottom:0;border-top:1px solid var(--sumi)}
  .act-stairs > li:first-child{padding-left:0}
  .act-stairs > li + li::before{content:"";position:absolute;left:0;top:0;height:44px;width:1px;background:var(--sumi)}
  .act-stairs .ink-prog{width:64px;height:64px;margin-bottom:var(--s-2)}
  .act-stairs h3{font-size:clamp(1.3rem,1rem + .6vw,1.6rem)}
  .act-stairs p:last-child{font-size:.875rem;line-height:1.55}
}

/* Sécurité / Éthique côte à côte */
.act-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--s-6);border-top:1px solid var(--rule)}
.act-pair > .act-sec{border-top:0}
.act-pair .callout p,.act-pair .note p{max-width:none}

/* Recherche continue */
.act-loops{max-width:560px}
.act-loops svg{width:100%;height:auto}
.act-maxim{padding-left:var(--s-5);border-left:2px solid var(--sumi);font:italic 500 clamp(1.4rem,1.2rem + .8vw,1.9rem)/1.3 var(--f-display);color:var(--sumi)!important}

/* Cinq axes : une ligne par axe */
.act-axes{border-top:1px solid var(--sumi)}
.act-axes > li{display:grid;grid-template-columns:104px minmax(0,13rem) minmax(0,1fr);column-gap:var(--s-5);align-items:center;padding-block:var(--s-4);border-bottom:1px solid var(--rule)}
.act-axes .ink-axis{width:96px;height:96px}
.act-axis-id h3{font:600 clamp(1.5rem,1.3rem + .6vw,1.875rem)/1 var(--f-display);letter-spacing:.02em;margin-block:4px 2px}
.act-axis-id .kanji{font-size:.9375rem}
.act-axis-id .sub-t{font:italic 500 1.125rem/1.25 var(--f-display);color:var(--shu-ink)}
.act-axis-d{margin:0!important}

/* Critères de progression */
.act-criteria{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,150px),1fr));border-top:1px solid var(--sumi)}
.act-criteria > li{padding:var(--s-4) var(--s-4) var(--s-4) 0;border-bottom:1px solid var(--rule);font:500 1.3rem/1.2 var(--f-display);color:var(--sumi)}
.act-criteria > li::before{content:"";display:block;width:10px;height:10px;margin-bottom:var(--s-3);background:var(--ink-blot) center/contain no-repeat}

/* Finalité + devise */
.act-finale .eyebrow .num{display:inline-flex;align-items:center}
.act-devise{margin-top:clamp(48px,6vw,88px);padding-top:var(--s-6);border-top:1px solid var(--night-rule);display:grid;gap:var(--s-4);max-width:60rem}
.act-devise-motto{font:500 clamp(2.1rem,1.3rem + 3.4vw,4.4rem)/1.02 var(--f-display);letter-spacing:-.015em;color:var(--night-text)}
.act-devise-motto b{font-weight:500;color:var(--night-accent)}
.act-devise-sub{font:italic 500 clamp(1.125rem,1rem + .5vw,1.4rem)/1.45 var(--f-display);color:var(--night-muted);max-width:34em}

/* ——— Responsive ——— */
@media (max-width:1100px) and (min-width:961px){
  .act-media,.act-media--art-first{grid-template-columns:1fr}
  .act-media-art{justify-self:start!important}
  .act-media--art-first .act-media-art{order:2}
  .act-axes > li{grid-template-columns:88px minmax(0,1fr)}
  .act-axes .ink-axis{width:88px;height:88px;grid-row:1 / span 2}
  .act-axis-d{grid-column:2;margin-top:var(--s-2)!important}
}
@media (max-width:900px){
  .act-page-head .page-head-text{grid-row:3;grid-column:1 / -1}
  .act-hero{grid-row:2;grid-column:1 / -1;justify-self:center;width:62%;max-width:300px;margin-top:var(--s-4)}
}
/* Frises en étapes (continuité…) : « transformation » ne tient pas dans une cellule sur ces plages → variante verticale (comme sous 640 px) */
@media (min-width:961px) and (max-width:1100px),(min-width:641px) and (max-width:760px){
  .act-steps{flex-direction:column}
  .act-steps > li{padding:var(--s-3) 0 var(--s-3) var(--s-6)!important;border-left:0!important}
  .act-steps > li + li{border-top:1px solid var(--rule)}
  .act-steps > li + li::before{content:"↓";left:0;top:var(--s-3)}
  .act-steps > li:first-child::before{content:"";position:absolute;left:4px;top:calc(var(--s-3) + 8px);width:9px;height:9px;background:var(--ink-blot) center/contain no-repeat}
}
@media (max-width:760px){
  .act-pair{grid-template-columns:1fr}
  .act-pair > .act-sec + .act-sec{border-top:1px solid var(--rule)}
  .act-trio{grid-template-columns:1fr}
  .act-trio > li,.act-trio > li + li{padding:var(--s-3) 0;border-left:0}
  .act-trio > li + li{border-top:1px solid var(--rule)}
  .act-trio-k{display:inline;margin-right:.5em}
}
@media (max-width:640px){
  .act-title > span:nth-child(3){padding-left:.3em}
  .act-title > span:nth-child(4){padding-left:.6em}
  .act-hero{width:58%;max-width:240px}
  .act-page-head .eyebrow .num{display:none}
  .act-page-head .actions .btn{flex:1 1 100%}
  .act-cols{grid-template-columns:1fr}
  .act-media,.act-media--art-first{grid-template-columns:1fr}
  .act-media-art{justify-self:start!important;max-width:220px!important}
  .act-media--art-first .act-media-art{order:0}
  .act-weapons{grid-template-columns:1fr}
  .act-axes > li{grid-template-columns:76px minmax(0,1fr);column-gap:var(--s-4);align-items:start}
  .act-axes .ink-axis{width:76px;height:76px;grid-row:1 / span 2}
  .act-axis-d{grid-column:2;margin-top:var(--s-2)!important}
  .act-criteria > li{font-size:1.2rem}
  .act-steps strong{font-size:1.3rem}
  .act-flow .chain-art{margin-bottom:var(--s-2)}
}