/* Page projet SŌSEI (+ le site-archive reconstruit : section « site » en fin de fichier) — styles propres à la page (le cadre vient de base.css + projet.css)
   =====================================================================
   UNIVERS SŌSEI — repris de la charte et des diapositives de soutenance :
   écru Kinari quadrillé comme les planches, chapitres en Sumi avec un grand kanji fantôme,
   étiquettes en vermillon Shu, un seul accent de couleur par vue.
   Polices du projet : Fraunces (voix des archives), JetBrains Mono (voix de la preuve), Noto Sans JP (kanji).
   ===================================================================== */
@font-face{font-family:"Fraunces";src:url(../../fonts/sosei/fraunces-latin-wght-normal.woff2) format("woff2");font-weight:100 900;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Fraunces";src:url(../../fonts/sosei/fraunces-latin-ext-wght-normal.woff2) format("woff2");font-weight:100 900;font-style:normal;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Fraunces";src:url(../../fonts/sosei/fraunces-latin-wght-italic.woff2) format("woff2");font-weight:100 900;font-style:italic;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"JetBrains Mono";src:url(../../fonts/sosei/jetbrains-mono-latin-500-normal.woff2) format("woff2");font-weight:500;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"JetBrains Mono";src:url(../../fonts/sosei/jetbrains-mono-latin-ext-500-normal.woff2) format("woff2");font-weight:500;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F}
@font-face{font-family:"Sosei JP";src:url(../../fonts/sosei/sosei-jp-700.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Sosei JP";src:url(../../fonts/sosei/sosei-jp-400.woff2) format("woff2");font-weight:400;font-display:swap}
/* Ō de Roboto Flex : absent du sous-ensemble du site, on le prend dans la variante étendue de Fraunces seulement pour le texte courant ; les titres l'écrivent O + macron combinant */

html{overflow-x:clip}
.page-projet{--sumi:#1C1917;--kinari:#F1EAD9;--shu:#C0381F;--seiji:#7C9C86;--ai:#243B53;--kin:#AD8A4B;
  --fond-projet:var(--kinari);--texte-projet:var(--sumi);--accent-projet:var(--shu);--trait-projet:rgba(28,25,23,.2);--doux-projet:#6E665C;--ink:28,25,23;
  --jp:"Sosei JP","Hiragino Sans","Yu Gothic","Noto Sans JP",sans-serif;--fr:"Fraunces",Georgia,serif;--jb:"JetBrains Mono",var(--mono)}
.jp{font-family:var(--jp);font-weight:700;font-style:normal}
/* la planche : le papier quadrillé des diapositives */
.planche{color:var(--texte-projet);background-color:var(--kinari);
  background-image:linear-gradient(rgba(28,25,23,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(28,25,23,.055) 1px,transparent 1px);background-size:32px 32px;background-position:-1px -1px}
.mono{color:inherit;font-size:max(11px,calc(11px*var(--k)))}
.bloc-tete,.chap .num,figure.f figcaption .leg,.credit{color:var(--doux-projet)!important}
.tag{display:inline-block;background:var(--shu);color:var(--kinari);padding:3px 7px 2px;line-height:1.1;font-size:10px!important}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* --- hero : sombre, comme la couverture de la charte --- */
.p-hero{--fond-projet:var(--sumi);background:var(--sumi);color:var(--kinari);height:min(calc(100vh - var(--barre) - var(--cadre-l)),780px);min-height:560px}
.p-hero::after{display:none}
.p-hero .fondu{position:absolute;top:0;bottom:0;right:0;width:70%;
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.4) 22%,#000 50%),linear-gradient(0deg,transparent 0%,rgba(0,0,0,.6) 14%,#000 36%);-webkit-mask-composite:source-in;
  mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.4) 22%,#000 50%),linear-gradient(0deg,transparent 0%,rgba(0,0,0,.6) 14%,#000 36%);mask-composite:intersect}
.p-hero .fondu img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:60% 50%;animation:h-lent 22s linear both}
@keyframes h-lent{from{transform:scale(1.1)}to{transform:scale(1)}}
.p-hero .h-k{color:rgba(241,234,217,.7)}
.p-hero .h-k b{color:var(--kinari)}
.p-hero .p-titre{letter-spacing:.025em;font-size:min(17vw,250px);line-height:.84;white-space:nowrap;max-width:none;padding-top:.12em}
.p-hero .h-sous{color:rgba(241,234,217,.82);max-width:560px}
.p-hero .h-rp{color:rgba(241,234,217,.6)}
.h-kanji{position:absolute;right:var(--m);top:40px;z-index:2;writing-mode:vertical-rl;font-size:44px;line-height:1.05;color:var(--shu);letter-spacing:.06em;animation:sceau-in 1.2s var(--machine) .6s both}
@keyframes sceau-in{from{opacity:0;transform:scale(1.25)}to{opacity:1;transform:none}}

/* --- intro --- */
.p-meta dl{border-top-color:var(--texte-projet)}
.p-meta dt{color:var(--doux-projet)}
.p-texte p+p{color:var(--texte-projet);font-size:16px}
.p-texte p+p+p{margin-top:12px}
.p-texte .lab{color:var(--doux-projet)}

/* --- chapitre : diapositive sombre, grand kanji fantôme --- */
.chap{position:relative;overflow:hidden;display:grid;grid-template-columns:repeat(12,1fr);gap:0 var(--gouttiere);padding:120px var(--m) 72px;margin-bottom:96px}
.chap.sumi{background:var(--sumi);color:var(--kinari)}
.chap.sumi .num{color:rgba(241,234,217,.6)!important}
.chap .num{grid-column:1/-1;display:flex;justify-content:space-between;margin-bottom:26px;position:relative}
.chap h2{grid-column:1/8;position:relative;font-weight:900;font-stretch:25%;text-transform:uppercase;line-height:.94;font-size:min(8vw,112px);text-wrap:balance}
.chap h2 span{color:var(--shu)}
.chap p{grid-column:9/13;position:relative;align-self:end;font-size:17px;line-height:1.55;color:rgba(241,234,217,.86)}
.fantome{position:absolute;right:calc(var(--m) - .06em);top:50%;transform:translateY(-50%);font-size:min(30vw,420px);line-height:1;color:rgba(241,234,217,.07);pointer-events:none;white-space:nowrap}
.chap.clos .fantome{writing-mode:vertical-rl;font-size:min(16vw,230px)}

/* --- bloc --- */
.bloc{display:grid;grid-template-columns:repeat(12,1fr);gap:0 var(--gouttiere);padding:0 var(--m) 104px}
.bloc-tete{grid-column:1/-1;display:flex;justify-content:space-between;border-top:1px solid var(--trait-projet);padding-top:10px;margin-bottom:30px}
.bloc .tx{grid-column:1/5;align-self:start}
.bloc .vis{grid-column:5/13;min-width:0}
.bloc.inv .tx{grid-column:9/13;grid-row:2}
.bloc.inv .vis{grid-column:1/9;grid-row:2}
.bloc.plein .tx{grid-column:1/6;margin-bottom:34px}
.bloc.plein .vis{grid-column:1/-1}
.bloc.plein .tx.large{grid-column:1/-1;columns:3;column-gap:var(--gouttiere)}
.tx.large h3{column-span:all}
.tx.large p{max-width:none;break-inside:avoid}
.tx h3{font-size:34px;font-weight:800;font-stretch:32%;text-transform:uppercase;line-height:.92;margin-bottom:16px;text-wrap:balance}
.tx p{font-size:16px;line-height:1.6;max-width:42ch;text-wrap:pretty}
.tx p+p{margin-top:12px}
.tx .aide{display:flex;align-items:flex-start;gap:8px;margin-top:22px;color:var(--accent-projet)}
.tx .aide::before{content:"";width:18px;height:1px;background:currentColor;flex:none;margin-top:.62em}

/* apparition légère + repères qui se tracent */
.monte{opacity:0;transform:translateY(22px);transition:opacity .9s var(--machine),transform 1.1s var(--machine)}
.monte.vu{opacity:1;transform:none}
figure.f.rv::before{clip-path:inset(0 100% 100% 0);transition:clip-path 1.1s var(--machine)}
figure.f.rv::after,figure.f.rv>figcaption{opacity:0;transition:opacity .6s var(--doux) .5s}
figure.f.rv>.tuile{clip-path:inset(100% 0 0 0);transition:clip-path 1.2s var(--machine) .25s}
figure.f.rv.vu::before{clip-path:inset(0)}
figure.f.rv.vu::after,figure.f.rv.vu>figcaption{opacity:1}
figure.f.rv.vu>.tuile{clip-path:inset(0)}

/* repère d'imprimeur (DA du site) : filet tireté + traits de coupe aux 4 coins + étiquettes mono */
.tuile{position:relative;overflow:hidden}
.tuile img{display:block;width:100%;height:auto}
figure.f{position:relative;display:flex;flex-direction:column;min-width:0;padding:22px;--cdc:rgba(var(--ink),.6)}
figure.f::before{content:"";position:absolute;inset:10px;border:1px dashed var(--trait-projet);pointer-events:none;z-index:2}
figure.f::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:2;background:
  linear-gradient(var(--cdc),var(--cdc)) left 0 top 10px/6px 1px no-repeat,linear-gradient(var(--cdc),var(--cdc)) left 10px top 0/1px 6px no-repeat,
  linear-gradient(var(--cdc),var(--cdc)) right 0 top 10px/6px 1px no-repeat,linear-gradient(var(--cdc),var(--cdc)) right 10px top 0/1px 6px no-repeat,
  linear-gradient(var(--cdc),var(--cdc)) left 0 bottom 10px/6px 1px no-repeat,linear-gradient(var(--cdc),var(--cdc)) left 10px bottom 0/1px 6px no-repeat,
  linear-gradient(var(--cdc),var(--cdc)) right 0 bottom 10px/6px 1px no-repeat,linear-gradient(var(--cdc),var(--cdc)) right 10px bottom 0/1px 6px no-repeat}
figure.f figcaption{position:absolute;inset:0;z-index:3;pointer-events:none}
figure.f figcaption .leg{position:absolute;left:34px;top:-4px;line-height:1;white-space:nowrap;background:var(--kinari);padding:0 4px}
figure.f figcaption .seg{position:absolute;right:30px;top:-12px;pointer-events:auto;background:var(--kinari)}
figure.f figcaption .seg.bas{top:auto;bottom:-12px}

/* rangée justifiée : même hauteur, aucun recadrage */
.rang{display:flex;gap:var(--gouttiere);align-items:flex-start}
.rang>figure{flex:var(--r) 1 0;min-width:0}

/* sélecteur */
.seg{display:inline-flex;border:1px solid rgba(var(--ink),.35);border-radius:999px;padding:2px;gap:2px;flex:none}
.seg button{border:0;background:none;border-radius:999px;padding:3px 10px;min-height:22px;font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--doux-projet);cursor:pointer;transition:background .35s,color .35s}
.seg button[aria-pressed="true"]{background:var(--texte-projet);color:var(--fond-projet)}
.seg button:focus-visible{outline:2px solid var(--accent-projet);outline-offset:2px}
.seg.pastilles{gap:6px;padding:4px}
.seg.pastilles button{width:16px;height:16px;min-height:0;padding:0;border-radius:50%;background:var(--c);box-shadow:inset 0 0 0 1px rgba(28,25,23,.3)}
.seg.pastilles button[aria-pressed="true"]{background:var(--c);box-shadow:0 0 0 2px var(--kinari),0 0 0 3px var(--texte-projet)}
.seg.kanji button{padding:2px 9px;font-size:14px;letter-spacing:0}
.seg.kanji button[aria-pressed="true"]{background:var(--shu);color:var(--kinari)}

/* vues qui se remplacent par un scan (de haut en bas), la case prend la hauteur de la vue */
.scan{position:relative;margin-inline:auto;transition:height .75s var(--machine),width .75s var(--machine)}
figure.f[data-x="vues"]{transition:width .75s var(--machine);max-width:100%}
.bloc.inv figure.f[data-x="vues"]{margin-left:auto}
.scan .v{position:absolute;left:0;top:0;width:100%;height:auto;clip-path:inset(0);z-index:1}
.scan .v.on{z-index:2}
.scan .morph{position:absolute;inset:0;width:100%;height:100%;z-index:4;pointer-events:none}
.scan .v:not(.on):not(.reste){visibility:hidden}
.scan .scan-in{clip-path:inset(0 0 100% 0)!important}
.scan .scan-go{transition:clip-path .8s var(--machine)!important}

/* --- le nom : 蘇生, pas 創成 --- */
.paire-k{display:grid;grid-template-columns:1fr 1fr;background:var(--kinari)}
.paire-k>div{display:flex;flex-direction:column;align-items:center;gap:18px;padding:44px 20px 40px}
.paire-k>div+div{border-left:1px solid var(--trait-projet)}
.paire-k b{position:relative;font-size:min(10vw,150px);line-height:1;letter-spacing:.02em}
.k-bon b{color:var(--sumi)}
.k-non b{color:rgba(28,25,23,.22)}
.k-non .tag{background:none;color:var(--doux-projet);box-shadow:inset 0 0 0 1px var(--trait-projet)}
.k-non .barre{position:absolute;left:-6%;top:50%;width:112%;height:6px;margin-top:-3px;background:var(--shu);border-radius:3px;transform:rotate(-4deg) scaleX(0);transform-origin:0 50%;transition:transform .8s var(--main) 1s}
.nom.vu .k-non .barre{transform:rotate(-4deg) scaleX(1)}

/* --- la case vide --- */
.case .tuile{background:var(--kinari);padding:26px 26px 30px}
.case table{width:100%;border-collapse:collapse;font-size:14px}
.case th,.case td{border-bottom:1px solid var(--trait-projet);padding:10px 6px;text-align:center}
.case thead th{font-family:var(--mono);font-size:10px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--doux-projet);vertical-align:bottom}
.case thead th .jp{display:block;font-size:24px;color:var(--sumi);margin-bottom:6px;letter-spacing:0}
.case tbody th{text-align:left;font-weight:600;white-space:nowrap}
.case tbody th i{display:block;font-family:var(--mono);font-style:normal;font-weight:500;font-size:10px;letter-spacing:.04em;color:var(--doux-projet);margin-top:2px}
.case td.o::after{content:"";display:inline-block;width:12px;height:12px;border-radius:50%;background:var(--sumi);transform:scale(0);transition:transform .45s cubic-bezier(.2,1.6,.4,1);transition-delay:calc(.4s + var(--i,0)*60ms)}
.case.vu td.o::after{transform:scale(1)}
.case tr.nous th{color:var(--shu)}
.case tr.nous td.o::after{background:var(--shu);width:16px;height:16px;transition-delay:calc(1.5s + var(--i,0)*140ms)}
.case tr.nous{border-top:2px solid var(--sumi)}
.socle{list-style:none;display:grid;grid-template-columns:repeat(5,1fr);margin-top:26px;border-top:1px solid var(--sumi)}
.socle li{display:flex;flex-direction:column;align-items:center;padding:14px 4px 0;gap:3px;text-align:center}
.socle li+li{border-left:1px solid var(--trait-projet)}
.socle b{font-size:34px;line-height:1.1;color:var(--shu)}
.socle span{font-weight:650;font-size:14px}
.socle i{font-family:var(--fr);font-size:13px;color:var(--doux-projet)}

/* --- le logo : les cernes poussent, les angles restent ouverts --- */
.logos .tuile{transition:background-color .6s var(--doux),color .6s var(--doux);background:var(--kinari);color:var(--sumi)}
.logos[data-f="1"] .tuile{background:var(--sumi);color:var(--kinari)}
.logos[data-f="2"] .tuile{background:var(--shu);color:var(--kinari)}
.scene{position:relative;height:clamp(280px,30vw,440px);cursor:pointer}
.scene:focus-visible{outline:2px dashed currentColor;outline-offset:-12px}
.lk-v{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .5s var(--doux)}
.lk-v.on{opacity:1}
.lk-trace.on{pointer-events:auto}
.sceau.h{width:100%}.sceau.v{height:62%}.sceau.s{height:76%}
.sceau path{transform-box:fill-box;transform-origin:center}
.logos.attend .lk-v path{opacity:0}
.lk-v.pousse .c1{animation:cerne .9s cubic-bezier(.2,1.4,.4,1) .1s both}
.lk-v.pousse .c2{animation:cerne 1.1s cubic-bezier(.2,1.3,.4,1) .45s both}
.lk-v.pousse .c3{animation:cadre 1.2s var(--machine) .85s both}
.lk-v.pousse .l{animation:lettre .8s var(--machine) both;animation-delay:calc(1.3s + var(--i,0)*90ms)}
@keyframes cerne{from{transform:scale(0) rotate(-40deg);opacity:0}to{transform:none;opacity:1}}
@keyframes cadre{from{transform:scale(.7) rotate(8deg);opacity:0}to{transform:none;opacity:1}}
@keyframes lettre{from{opacity:0;transform:translateY(14%)}to{opacity:1;transform:none}}
.logos[data-f="1"] .x-note,.logos[data-f="2"] .x-note{color:var(--kinari)}
.logos[data-f="1"] .x-note path,.logos[data-f="2"] .x-note path{stroke:var(--kinari)}
.logos .x-note{transition:opacity .4s;left:36%;top:calc(100% + 34px)}
.lk-w{position:relative;display:flex;align-items:center;justify-content:center;width:min(62%,520px)}
.lk-w .sceau.h{width:100%}
.logos:not([data-k="1"]) .x-note{opacity:0}

/* --- la couleur : un socle, trois gestes --- */
.couleurs .tuile{display:grid;grid-template-columns:1fr 1fr;background:var(--kinari)}
.nuancier{display:flex;flex-direction:column;gap:10px;padding:24px}
.nuancier b{display:block;font-weight:650;font-size:14px}
.nuancier i{display:block;font-style:normal;font-family:var(--mono);font-size:10px;letter-spacing:.04em;text-transform:uppercase;margin-top:2px;opacity:.8}
.neutres{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.neutres span{background:var(--c);color:var(--kinari);padding:46px 12px 10px;box-shadow:inset 0 0 0 1px rgba(28,25,23,.18)}
.neutres span+span{color:var(--sumi)}
.socle-c{background:var(--c);color:var(--kinari);padding:30px 12px 10px}
.gestes{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.gestes button{all:unset;cursor:pointer;background:var(--c);color:var(--kinari);padding:46px 10px 10px;position:relative;transition:transform .35s var(--machine),box-shadow .35s}
.gestes button[aria-pressed="false"]{opacity:.42}
.gestes button[aria-pressed="true"]{box-shadow:0 0 0 2px var(--kinari),0 0 0 3px var(--sumi)}
.gestes button:hover{opacity:1}
.gestes button:focus-visible{outline:2px dashed var(--sumi);outline-offset:3px}
.fiche{--g:var(--ai);position:relative;margin:24px 24px 24px 0;background:#F6F1E4;box-shadow:inset 0 0 0 1px rgba(28,25,23,.18);display:flex;flex-direction:column;padding:16px 18px;min-height:340px;transition:--g .5s}
.couleurs[data-g="seiji"] .fiche{--g:var(--seiji)}.couleurs[data-g="kin"] .fiche{--g:var(--kin)}
.f-haut{display:flex;justify-content:space-between;font-family:var(--jb)!important;font-size:10px!important;padding-bottom:10px;border-bottom:1px solid var(--sumi)}
.f-fn{background:var(--g);color:var(--kinari);padding:1px 6px;transition:background .5s}
.f-k{font-size:min(9vw,128px);line-height:1;color:var(--g);margin:auto 0 0;transition:color .5s}
.f-t{font-family:var(--fr);font-style:italic;font-size:28px;line-height:1.1;margin-top:10px}
.f-c{font-family:var(--jb)!important;font-size:10px!important;color:var(--doux-projet);margin:8px 0 18px}
.f-socle{display:flex;justify-content:space-between;background:var(--shu);color:var(--kinari);font-family:var(--jb)!important;font-size:10px!important;padding:6px 8px}
.fiche.change .f-k,.fiche.change .f-t{animation:fiche .55s var(--machine)}
@keyframes fiche{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* --- trois voix --- */
.voix .tuile{background:var(--kinari);padding:8px 26px}
.v-l{display:grid;grid-template-columns:150px 1fr;column-gap:22px;align-items:center;padding:24px 0;border-bottom:1px solid var(--trait-projet)}
.v-l:last-child{border-bottom:0}
.v-l>span{color:var(--doux-projet);font-size:10px!important;align-self:start;padding-top:6px}
.v-l>i{grid-column:2;font-style:normal;color:var(--doux-projet);font-size:10px!important;margin-top:10px}
.v-px .px{display:block;width:100%;height:auto;max-height:64px;color:var(--sumi)}
.v-fr{font-family:var(--fr);font-size:clamp(20px,2vw,28px);line-height:1.25;font-weight:400;font-variation-settings:"opsz" 72}
.v-jb{font-family:var(--jb);font-size:15px;letter-spacing:.04em}
.v-jb .jp,.v-jb{word-spacing:.1em}

/* --- la série : une grande affiche, son cartel, son empreinte --- */
.serie{display:grid;grid-template-columns:7fr 5fr;gap:var(--gouttiere);align-items:center}
.serie .grande{justify-self:end}
.cartel{display:flex;flex-direction:column;align-items:flex-start;padding:0 0 0 24px;max-width:380px}
.c-k{font-size:min(12vw,170px);line-height:1;color:var(--shu);margin:18px 0 6px}
.c-t{font-size:40px;font-weight:850;font-stretch:30%;text-transform:uppercase;line-height:.92}
.c-d{font-family:var(--fr);font-style:italic;font-size:19px;margin-top:8px}
.emp{position:relative;width:96px;aspect-ratio:.72;margin-top:30px}
.emp img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;opacity:0}
.emp img.on{opacity:1}
.emp img.frappe{animation:frappe .5s cubic-bezier(.3,1.5,.5,1)}
@keyframes frappe{0%{opacity:0;transform:scale(1.35) rotate(-6deg)}55%{opacity:1;transform:scale(.96) rotate(1deg)}100%{opacity:1;transform:none}}
.c-l{color:var(--doux-projet);margin-top:8px}
.cartel.change .c-k,.cartel.change .c-t,.cartel.change .c-d{animation:fiche .55s var(--machine)}
.grande .x-note{transition:opacity .4s;left:calc(100% - 26px);bottom:7%}
.grande[data-k]:not([data-k="0"]) .x-note{opacity:0}
.p-pleine{padding:0 var(--m) 104px}
.duo-a{align-items:flex-start;max-width:1000px;margin:0 auto}

/* --- le tracé, première vue du logo : la construction se dessine, la main l'encre --- */
.lk-trace .trace-z{width:min(92%,980px);cursor:crosshair;touch-action:pan-y}
.trace{display:block;width:100%;height:auto}
.t-cons path{fill:none;stroke:currentColor;stroke-opacity:.17;stroke-width:1.4;stroke-dasharray:1 1;stroke-dashoffset:1}
.t-trait path{fill:none;stroke:currentColor;stroke-width:2.4;stroke-dasharray:1 1;stroke-dashoffset:1}
.t-poig path{fill:none;stroke:currentColor;stroke-opacity:.45;stroke-width:1.3;opacity:0}
.t-pts path{fill:var(--fl);stroke:currentColor;stroke-opacity:.6;stroke-width:1.4;opacity:0;transform-box:fill-box;transform-origin:center;transform:scale(0)}
.t-plein path{fill:currentColor;fill-rule:evenodd}
.m-tout{opacity:0}
.m-pinceau circle{animation:goutte .5s cubic-bezier(.2,1.2,.4,1) both}
@keyframes goutte{from{r:0}}
.logos{--fl:var(--kinari)}.logos[data-f="1"]{--fl:var(--sumi)}.logos[data-f="2"]{--fl:var(--shu)}
.lk-trace.dessine .t-cons path{stroke-dashoffset:0;transition:stroke-dashoffset 1.5s var(--doux) calc(var(--j,0)*12ms)}
.lk-trace.dessine .t-trait path{stroke-dashoffset:0;transition:stroke-dashoffset 2.2s var(--main) calc(.5s + var(--i)*.14s)}
.lk-trace.dessine .t-poig path{opacity:1;transition:opacity .8s var(--doux) 2.3s}
.lk-trace.dessine .t-pts path{opacity:1;transform:none;transition:opacity .25s,transform .45s cubic-bezier(.2,1.6,.4,1);transition-delay:calc(2.2s + var(--j,0)*2.5ms)}

/* --- site : un vrai navigateur, des pages qui changent par leurs cases --- */
.navig .tuile{background:#E9E3D3;box-shadow:inset 0 0 0 1px rgba(28,25,23,.2)}
.barre-nav{display:flex;align-items:center;gap:4px;padding:7px 10px;font-size:10px!important;color:var(--doux-projet)}
.barre-nav button{all:unset;cursor:pointer;width:24px;height:20px;text-align:center;line-height:20px;font-size:14px;color:var(--sumi);border-radius:4px}
.barre-nav button:hover:not([disabled]){background:rgba(28,25,23,.08)}
.barre-nav button[disabled]{opacity:.28;cursor:default}
.barre-nav button:focus-visible{outline:2px solid var(--shu)}
.barre-nav .url{margin-left:8px;background:var(--kinari);padding:3px 12px;border-radius:999px;flex:0 1 380px;text-transform:none!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.barre-nav .url b{font-weight:500;color:var(--sumi)}
figure.f figcaption .ou{padding:4px 12px;border:1px solid rgba(var(--ink),.35);border-radius:999px;background:var(--kinari);text-transform:uppercase;color:var(--sumi);font-size:10px!important;letter-spacing:.08em;pointer-events:none}
.garder{all:unset;cursor:pointer;white-space:nowrap;align-self:flex-start;border:1px solid var(--sumi);padding:9px 14px;font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;transition:background .3s,color .3s}
.garder:hover{background:var(--sumi);color:var(--kinari)}
.garder:focus-visible{outline:2px dashed var(--shu);outline-offset:3px}
.garder[hidden]{display:none}

/* --- l'acte : on signe, on scelle, une seule fois --- */
.acte-f{max-width:720px;margin:0 auto}
.acte-f .tuile{display:grid;grid-template-columns:minmax(0,1fr) 170px;gap:24px;align-items:end;overflow:visible}
.acte{position:relative;box-shadow:0 18px 40px -22px rgba(28,25,23,.45)}
.acte img{width:100%;height:auto}
.temoin input{position:absolute;left:40.3%;top:33.1%;width:36%;height:3.4%;border:0;background:transparent;font-family:var(--fr);font-style:italic;font-size:clamp(13px,1.45vw,21px);color:#1D3D8F;padding:0 2px;outline:none;caret-color:var(--shu)}
.temoin input::placeholder{color:rgba(29,61,143,.35)}
.temoin input:focus{background:rgba(192,56,31,.06)}
.temoin input[readonly]{cursor:default}
.sous{position:absolute;top:93.9%;font-family:var(--fr);font-style:italic;font-size:clamp(8px,.85vw,12px);color:#1D3D8F;white-space:nowrap;opacity:0;transition:opacity .6s .5s}
.s-nom{left:38.2%}.s-date{left:60.6%}
.acte.scelle .sous{opacity:1}
.cachet-z{position:absolute;left:79.2%;top:74.2%;width:15.9%;height:22.2%;display:flex;align-items:center;justify-content:center;pointer-events:none}
.cachet{height:88%;width:auto;color:var(--shu);opacity:0;filter:url(#encre);mix-blend-mode:multiply}
.acte.scelle .cachet{animation:tampon .7s cubic-bezier(.3,1.4,.5,1) forwards}
@keyframes tampon{0%{opacity:0;transform:scale(1.6) rotate(-8deg)}45%{opacity:.95;transform:scale(.94) rotate(-2.5deg)}100%{opacity:.92;transform:rotate(-2.5deg)}}
.acte.scelle{animation:secousse .35s ease-out .3s}
@keyframes secousse{30%{transform:translateY(2px)}60%{transform:translateY(-1px)}}
.acte-ctl{display:flex;flex-direction:column;gap:12px;padding-bottom:6px}
.sceller{all:unset;cursor:pointer;white-space:nowrap;align-self:flex-start;display:inline-flex;align-items:center;gap:8px;background:var(--shu);color:var(--kinari);padding:10px 14px;font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;transition:background .3s,transform .2s}
.sceller .jp{font-size:15px;letter-spacing:0}
.sceller:hover{transform:translateY(-2px)}
.sceller:focus-visible{outline:2px dashed var(--shu);outline-offset:3px}
.sceller[disabled]{background:var(--sumi);cursor:default;transform:none;opacity:.85}
.etat{color:var(--doux-projet);font-size:10px!important;line-height:1.5}

/* note manuscrite */
.x-note{position:absolute;font-family:var(--hand);color:var(--rouge);font-size:32px;line-height:.9;white-space:nowrap;z-index:4;pointer-events:none}
.x-note svg{position:absolute;overflow:visible}.x-note path{fill:none;stroke:var(--rouge);stroke-width:2.2;stroke-linecap:round}

/* citation */
.p-citation{display:grid;grid-template-columns:repeat(12,1fr);gap:0 var(--gouttiere);padding:0 var(--m) 96px}
.p-citation small{grid-column:1/-1;border-top:1px solid var(--trait-projet);padding-top:10px;margin:0 0 26px;color:var(--doux-projet)}
.p-citation p{grid-column:1/11;font-size:min(7vw,104px);line-height:.92;color:var(--texte-projet)}
.p-citation p span{color:var(--shu)}

.credit{padding:0 var(--m) 60px}
.doigt{display:none}
@media (hover:none){.souris{display:none}.doigt{display:inline}}

/* --- trois métiers, un objet : la lumière suit la lame, le manche, la finition --- */
.couteau .vis{display:flex;justify-content:flex-end}
.bio{width:min(100%,calc(74vh * .764 + 44px))}
.bio .tuile{background:var(--sumi)}
.bio .ombre{position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(circle at var(--ox,66%) var(--oy,74%),rgba(28,25,23,0) var(--or,30%),rgba(28,25,23,.86) calc(var(--or,30%) * 1.3 + 5%))}
.bio .pt{position:absolute;left:var(--x);top:var(--y);width:58px;height:58px;margin:-29px 0 0 -29px;border-radius:50%;border:1px solid var(--shu);
  display:grid;place-items:center;opacity:0;transform:scale(.6);transition:opacity .6s var(--doux),transform .8s var(--machine)}
.bio .pt::after{content:"";position:absolute;inset:-9px;border-radius:50%;border:1px dashed rgba(241,234,217,.45)}
.bio .pt b{font-size:17px;color:var(--kinari);background:var(--shu);width:30px;height:30px;display:grid;place-items:center;line-height:1}
.bio[data-e="0"] .pt[data-i="0"],.bio[data-e="1"] .pt[data-i="1"],.bio[data-e="2"] .pt[data-i="2"]{opacity:1;transform:none}
.bio[data-e="3"] .pt{opacity:.85;transform:scale(.8)}
.bio-fin{position:absolute;left:22px;bottom:18px;color:var(--kinari);background:var(--shu);padding:4px 8px 3px;letter-spacing:.08em;text-transform:uppercase;opacity:0;transform:translateY(8px);transition:opacity .6s,transform .8s var(--machine)}
.bio[data-e="3"] .bio-fin{opacity:1;transform:none}
.etapes{list-style:none;margin:30px 0 0;padding:0;display:grid;gap:0;border-top:1px solid var(--trait-projet);max-width:42ch}
.etapes li{display:grid;grid-template-columns:38px 1fr 44px;grid-template-rows:auto auto;column-gap:12px;align-items:center;padding:12px 0;border-bottom:1px solid var(--trait-projet);
  opacity:.38;transition:opacity .5s var(--doux)}
.etapes li b{grid-row:1/3;width:34px;height:34px;display:grid;place-items:center;font-size:18px;line-height:1;border:1px solid currentColor;transition:background .4s,color .4s,border-color .4s}
.etapes li span{text-transform:uppercase;letter-spacing:.08em}
.etapes li i{font-style:normal;color:var(--doux-projet);grid-column:2;text-transform:none;letter-spacing:.02em}
.etapes li img{grid-row:1/3;grid-column:3;width:44px;height:44px;object-fit:contain;opacity:.9}
.etapes li.on,.etapes li.fait{opacity:1}
.etapes li.on b{background:var(--shu);border-color:var(--shu);color:var(--kinari)}

.collection .tuile{padding:26px;background:transparent}
.collection .rang figure img{width:100%;height:auto;box-shadow:0 1px 0 rgba(28,25,23,.08)}

@media (max-width:900px){
  .p-hero .fondu{width:100%;opacity:.55}
  .p-hero .p-titre{font-size:clamp(64px,20vw,150px)}
  .h-kanji{font-size:30px;top:24px}
  .chap{padding:72px var(--m) 48px;margin-bottom:64px}.chap h2,.chap p{grid-column:1/-1}.chap p{margin-top:20px}
  .chap .num{flex-direction:column;align-items:flex-start;gap:4px}
  .fantome{font-size:60vw;top:auto;bottom:-10vw;transform:none}
  .bloc{padding-bottom:64px}.bloc .tx,.bloc .vis,.bloc.inv .tx,.bloc.inv .vis{grid-column:1/-1!important;grid-row:auto!important}
  .bloc .tx{margin-bottom:24px}.bloc.plein .tx.large{columns:1}
  .p-citation p{grid-column:1/-1;font-size:44px}
  .rang{flex-direction:column;gap:40px}.rang>figure{flex:none;width:100%}
  .collection .rang{flex-direction:row;overflow-x:auto;gap:12px;scroll-snap-type:x mandatory}.collection .rang>figure{flex:0 0 62%;scroll-snap-align:start}
  .bio .tuile{max-width:none}.etapes{grid-template-columns:1fr}
  .serie{grid-template-columns:1fr}.serie .grande{justify-self:center}.cartel{padding:0;max-width:none}
  .couleurs .tuile{grid-template-columns:1fr}.fiche{margin:0 24px 24px}
  .v-l{grid-template-columns:1fr}.v-l>i{grid-column:1}
  .acte-f .tuile{grid-template-columns:1fr}
  .x-note{font-size:26px}
}
@media (max-width:600px){
  .p-hero{height:auto;min-height:0;display:flex;flex-direction:column}
  .p-hero .fondu{position:relative;width:100%;height:68vw;opacity:1;-webkit-mask-image:linear-gradient(0deg,transparent 0%,#000 40%);mask-image:linear-gradient(0deg,transparent 0%,#000 40%)}
  .p-hero .h-in{position:relative;left:auto;right:auto;bottom:auto;padding:22px var(--m) 30px}
  figure.f figcaption .seg{right:18px}
  figure.f figcaption .seg.bas{right:auto;left:50%;transform:translateX(-50%)}
  .seg button{padding:3px 6px}
  .case .tuile{padding:16px 10px;overflow-x:auto}.case table{font-size:12px}.case tbody th{white-space:normal}
  .socle b{font-size:26px}.socle i{display:none}
  .paire-k b{font-size:15vw}
  .case th,.case td{padding:8px 2px}.case thead th{font-size:8px}.case thead th .jp{font-size:18px}.case tbody th i{display:none}.case td.o::after{width:9px;height:9px}.case tr.nous td.o::after{width:12px;height:12px}
  figure.f figcaption:has(.seg:not(.bas)) .leg{display:none}
  .x-note{display:none}
}
@media (prefers-reduced-motion:reduce){.monte{opacity:1;transform:none}.p-hero .fondu img{animation:none}.scan{transition:none}.k-non .barre{transform:rotate(-4deg)}.case td.o::after{transform:scale(1)}.acte.scelle .cachet{opacity:.92;transform:rotate(-2.5deg)}}

/* =====================================================================
   Le site-archive SŌSEI, prototype navigable (reconstruit depuis le Figma « Soutenance »)
   Principe du site : l'accueil est la fenêtre ronde ; les pages sont des shōji qui se referment
   dessus. Neuf panneaux, quatre lignes (v1, v2, h1, h2) : chaque page est une position de la même
   trame, et la fenêtre du centre cadre son image. On change de page en faisant glisser la trame.
   Scène en 1920 × 1080, mise à l'échelle de la fenêtre du navigateur.
   ===================================================================== */
@font-face{font-family:"SX Fraunces";src:url(../../fonts/sosei/fraunces-latin-full-normal.woff2) format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:"SX Fraunces";src:url(../../fonts/sosei/fraunces-latin-full-italic.woff2) format("woff2");font-weight:100 900;font-style:italic;font-display:swap}
@font-face{font-family:"SX JB";src:url(../../fonts/sosei/jetbrains-mono-latin-400-normal.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"SX JB";src:url(../../fonts/sosei/jetbrains-mono-latin-500-normal.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"SX JB";src:url(../../fonts/sosei/jetbrains-mono-latin-ext-500-normal.woff2) format("woff2");font-weight:400 500;font-display:swap;unicode-range:U+0100-02BA,U+1E00-1E9F}
@font-face{font-family:"SX JB";src:url(../../fonts/sosei/jetbrains-mono-latin-700-normal.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"SX JB";src:url(../../fonts/sosei/jetbrains-mono-latin-400-italic.woff2) format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"SX Zen";src:url(../../fonts/sosei/sx-zen-500.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"SX Zen";src:url(../../fonts/sosei/sx-zen-700.woff2) format("woff2");font-weight:700;font-display:swap}

.ecran{position:relative;aspect-ratio:16/9;overflow:hidden;background:#1C1917}
.sx{--sumi:#1C1917;--kinari:#F1EAD9;--shu:#C0381F;--seiji:#7C9C86;--ai:#243B53;--kin:#AD8A4B;--gris:#8D887E;--sumi6:#6F6A62;
  --face:var(--kinari);--trait:var(--sumi);--encre:var(--sumi);
  --v1:844px;--v2:1488px;--h1:440px;--h2:809px;--k:.5;
  position:absolute;left:0;top:0;width:1920px;height:1080px;transform:scale(var(--k));transform-origin:0 0;overflow:hidden;
  color:var(--encre);font-family:"SX Fraunces",Georgia,serif;font-variation-settings:"SOFT" 0,"WONK" 1;-webkit-font-smoothing:antialiased;
  transition:--face .9s var(--doux),--trait .9s var(--doux),color .9s}
@property --face{syntax:'<color>';inherits:true;initial-value:#F1EAD9}
@property --trait{syntax:'<color>';inherits:true;initial-value:#1C1917}
.sx[data-p="inscrire"]{--face:var(--sumi);--trait:var(--kinari);--encre:var(--kinari)}
.sx *{box-sizing:border-box}
.sx :where(a,button){color:inherit;font:inherit;text-decoration:none;background:none;border:0;padding:0;cursor:pointer}
.sx img{max-width:none}
.sx .t-img{width:auto;height:auto}
.sx-fond{position:absolute;inset:0;width:1920px;height:1080px;display:block}

/* --- la trame : neuf panneaux posés sur les quatre lignes --- */
.sx-cadre{position:absolute;inset:0}
.fa{position:absolute;background:var(--face);border:1px solid var(--trait);transition:transform 1s cubic-bezier(.7,0,.2,1),background-color .9s,border-color .9s;transition-delay:var(--td,0s)}
.fa[data-c="0"]{left:0;width:calc(var(--v1) + 1px)}
.fa[data-c="1"]{left:var(--v1);width:calc(var(--v2) - var(--v1) + 1px)}
.fa[data-c="2"]{left:var(--v2);width:calc(1920px - var(--v2))}
.fa[data-r="0"]{top:0;height:calc(var(--h1) + 1px)}
.fa[data-r="1"]{top:var(--h1);height:calc(var(--h2) - var(--h1) + 1px)}
.fa[data-r="2"]{top:var(--h2);height:calc(1080px - var(--h2))}
/* les panneaux s'ouvrent comme des shōji : à gauche, à droite, en haut, en bas */
.sx[data-ouvert="1"] .fa[data-c="0"]{transform:translateX(-102%)}
.sx[data-ouvert="1"] .fa[data-c="2"]{transform:translateX(102%)}
.sx[data-ouvert="1"] .fa[data-c="1"][data-r="0"]{transform:translateY(-102%)}
.sx[data-ouvert="1"] .fa[data-c="1"][data-r="2"]{transform:translateY(102%)}
.sx[data-ouvert="1"] .fa-centre{transform:scale(0)}
.fa[data-r="0"]{--td:.06s}.fa[data-r="2"]{--td:.12s}.fa-centre{--td:.2s}

/* la fenêtre du centre : l'image de la page, ses quatre poignées */
.fenetre{position:absolute;left:var(--v1);top:var(--h1);width:calc(var(--v2) - var(--v1) + 1px);height:calc(var(--h2) - var(--h1) + 1px);border:1px solid var(--trait);overflow:visible;
  transition:opacity .6s,clip-path 1s cubic-bezier(.7,0,.2,1) .25s;clip-path:inset(-10px)}
.fen-in{position:absolute;inset:0;overflow:hidden}
.fenetre img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.08);transition:opacity .7s var(--doux),transform 1.6s cubic-bezier(.2,.7,.2,1)}
.fenetre img.on{opacity:1;transform:none}
.sx[data-ouvert="1"] .fenetre,.sx[data-p="inscrire"] .fenetre{clip-path:inset(50% 50% 50% 50%)}
.sx[data-p="inscrire"] .fenetre{opacity:0}
.pg{position:absolute;width:12.5px;height:12.5px;background:var(--face);border:1px solid var(--trait);z-index:2;transition:transform .5s cubic-bezier(.2,1.6,.4,1) .9s,background-color .9s}
.pg.h1{left:-6.5px;top:-6.5px}.pg.h2{right:-6.5px;top:-6.5px}.pg.h3{left:-6.5px;bottom:-6.5px}.pg.h4{right:-6.5px;bottom:-6.5px}
.sx[data-ouvert="1"] .fenetre .pg{transform:scale(0);transition-delay:0s}

/* --- les pages : les éléments entrent après la trame --- */
.pa{position:absolute;inset:0;visibility:hidden;pointer-events:none}
.pa.on{visibility:visible;pointer-events:auto}
.pa .e,.pa>[class^="col-"]>.e{opacity:0;transform:translateY(14px);transition:opacity .25s,transform .25s}
.pa>.e,.pa>[class^="col-"]{position:absolute}
.pa.on .e{opacity:1;transform:none;transition:opacity .7s var(--doux),transform .9s cubic-bezier(.2,.7,.2,1);transition-delay:calc(.05s + var(--d,0)*.08s)}
.pa.sort .e{opacity:0;transform:translateY(-8px);transition:opacity .22s,transform .3s;transition-delay:0s}
.t-img{display:block;height:auto}

/* typographie du site */
.zk{font-family:"SX Zen","Hiragino Sans",sans-serif;font-weight:700}
.mono20{font-family:"SX JB",monospace;font-weight:500;font-size:20px;line-height:1.25;color:var(--sumi6);text-transform:uppercase;white-space:nowrap}
.mono20 .zk{font-weight:500}
.fr20{font-size:20px;line-height:1.2}.fr25{font-size:25px;line-height:1.2}.fr30{font-size:30px;line-height:1.2}
.it{font-style:italic}.sb{font-weight:600}.shu{color:var(--shu)}.droite{text-align:right}
.citation-s{white-space:nowrap}
.code{position:absolute;right:31px;bottom:auto;top:1007px;font-family:"SX JB",monospace;font-weight:700;font-size:10.678px;line-height:1.32;text-transform:uppercase;text-align:right;white-space:nowrap;padding-right:18px}
.code::after{content:"";position:absolute;right:0;top:0;bottom:0;width:2px;background:var(--shu)}
.pa.on .code::after{animation:trait-code .9s cubic-bezier(.7,0,.2,1) both .8s}
@keyframes trait-code{from{transform:scaleY(0);transform-origin:50% 0}}
.bt{display:inline-block;font-family:"SX JB",monospace;font-size:16.779px;line-height:1.04;text-transform:uppercase;padding:7.857px 15.714px;color:var(--kinari)!important;transition:transform .3s,box-shadow .3s}
.bt:hover{transform:translateY(-2px);box-shadow:0 3px 0 rgba(28,25,23,.25)}
.bt:focus-visible,.sx a:focus-visible,.sx button:focus-visible{outline:2px solid var(--shu);outline-offset:3px}
.bt-seiji{background:var(--seiji)}.bt-shu{background:var(--shu)}
.sx-dit{position:absolute;left:50%;bottom:44px;z-index:30;transform:translate(-50%,10px);background:var(--sumi);color:var(--kinari);font-family:"SX JB",monospace;font-size:15px;text-transform:uppercase;letter-spacing:.04em;padding:12px 20px;border:1px solid var(--gris);opacity:0;transition:opacity .3s,transform .3s;pointer-events:none;white-space:nowrap}
.sx-dit.on{opacity:1;transform:translate(-50%,0)}

/* barre du haut */
.sx-nav{position:absolute;left:0;top:33.12px;width:1920px;display:flex;align-items:center;padding:0 30px;z-index:20;font-family:"SX JB",monospace;font-size:10.678px;line-height:1.04;text-transform:uppercase;transition:opacity .4s}
.sx[data-ouvert="1"] .sx-nav{opacity:0;pointer-events:none}
.sx-logo{display:block;width:38.67px;height:37.37px;color:var(--encre)}
.sx-logo svg{display:block;width:100%;height:100%}
.sx-menu{flex:1;display:flex;justify-content:center;align-items:center;gap:50px;padding:2.81px}
.sx-menu a{position:relative}
.sx-menu a:not(.sx-ins)::after{content:"";position:absolute;left:0;right:0;bottom:-4px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:0 50%;transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.sx-menu a:hover::after,.sx-menu a[aria-current="page"]::after{transform:scaleX(1)}
.sx-menu a[aria-current="page"]{pointer-events:none}
.sx-ins{background:var(--shu);padding:5px 10px;color:var(--sumi)!important}
.sx[data-p="inscrire"] .sx-ins{color:var(--kinari)!important}
.sx-lg{padding:2.81px;font-family:inherit;text-transform:uppercase}
.sx-lg span{margin:0 0}.sx-lg i{font-style:normal;color:var(--gris)}
.sx-zones-accueil{position:absolute;inset:0;z-index:21;display:none}
.sx[data-p="accueil"] .sx-zones-accueil{display:block}
.sx-zones-accueil>*{position:absolute;display:block}
.sx-zones-accueil>*:hover{box-shadow:inset 0 -1px 0 var(--kinari)}
.sx-zones-accueil .defiler{animation:respire 2.4s ease-in-out infinite}
@keyframes respire{50%{box-shadow:inset 0 -2px 0 rgba(241,234,217,.5)}}

/* Métal & Lame */
.bt-ai{background:var(--ai);color:var(--kinari)!important;font-family:"SX JB",monospace;font-size:10px;line-height:1.4;padding:5px 10px;text-decoration:underline!important;text-underline-offset:2px}
.carte-ev{width:328px;height:139px;background:var(--sumi);border:1px solid var(--kinari);color:var(--kinari)!important;display:flex;flex-direction:column;justify-content:center;gap:50px;padding:20px 15px;transition:transform .4s cubic-bezier(.2,.7,.2,1)!important}
.carte-ev:hover{transform:translateY(-4px)!important}
.carte-ev .pg{background:var(--sumi);border-color:var(--kinari)}
.ev-l{display:flex;justify-content:space-between;align-items:center}
.ev-l b{font-weight:600;font-size:26px;line-height:1.23}
.ev-l i{font-style:normal;font-family:"SX JB",monospace;font-size:11px;text-transform:uppercase;border:1px solid var(--kinari);padding:5px}
.carte-ev em{font-size:20px;line-height:1.23}
.index-m{display:flex;flex-direction:column;gap:2px}
.index-m button{display:block;width:40px;height:8px;position:relative}
.index-m i{position:absolute;left:0;top:3px;height:1.5px;width:19px;background:var(--sumi);transition:width .4s cubic-bezier(.2,.7,.2,1),background-color .3s}
.index-m button.on i{background:var(--shu);width:26px}
.index-m button:hover i{width:30px}
/* les matières : cinq couches, la page défile de l'une à l'autre */
.pa-mat .mat{position:absolute;inset:0;opacity:var(--o,0);pointer-events:none}
.pa-mat .mat.actif{pointer-events:auto}
.pa-mat .mx{translate:0 calc(var(--dy,0px) * var(--y,1))}

/* École */
.col-ecole{display:flex;flex-direction:column;gap:73px;padding:60px}
.col-ecole>.e{position:relative}
.tete-l{display:flex;justify-content:space-between;align-items:center;width:765px}
.tete-c{display:flex;flex-direction:column;gap:30px;align-items:flex-start}
.col-ecole>.intro{margin-bottom:-42px}
.liste-e{border-top:1px solid var(--sumi)}
.le{display:flex;gap:44px;align-items:flex-start;padding:25px 0 27px;border-bottom:1px solid var(--sumi);transition:background-color .3s}
.le .n{font-family:"SX JB",monospace;font-weight:500;font-size:25px;color:var(--seiji);width:36px}
.le>div{flex:1;display:flex;flex-direction:column;gap:28px}
.le b{font-weight:400}
.le .duree{font-family:"SX JB",monospace;font-weight:500;font-size:20px;color:var(--gris);text-transform:uppercase;white-space:nowrap}
.le:hover{background:rgba(124,156,134,.08)}
.col-ecole .bt{align-self:flex-start;margin-top:-42px}

/* Archive */
.col-archive{display:flex;flex-direction:column;gap:60px;padding:60px}
.col-archive>.e{position:relative}
.onglets{display:flex;gap:73px;font-weight:500;font-size:20px;color:var(--ai);text-transform:uppercase}
.onglets button{text-transform:uppercase;text-underline-offset:4px}
.onglets button[aria-selected="true"]{text-decoration:underline;text-decoration-thickness:1.8px}
.onglets button:hover{text-decoration:underline}
.registre{border-top:1px solid var(--sumi);display:flex;flex-direction:column;margin-top:13px}
.ra{position:relative;display:flex;align-items:center;gap:20px;height:71px;border-bottom:1px solid var(--sumi);transition:transform .7s cubic-bezier(.2,.7,.2,1),background-color .3s}
.ra .code-a{font-family:"SX JB",monospace;font-weight:500;font-size:25px;color:var(--ai)}
.ra b{font-size:30px;line-height:1}
.ra .t{font-size:30px}
.ra i{margin-left:auto;align-self:flex-start;margin-top:14px;font-style:normal;font-family:"SX JB",monospace;font-weight:500;font-size:12px;color:var(--gris);text-transform:uppercase}
a.ra:hover{background:rgba(36,59,83,.07)}
a.ra:hover .t{text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1px}
a.ra::after{content:"→";position:absolute;right:-34px;font-family:"SX JB",monospace;font-size:22px;color:var(--ai);opacity:0;transition:opacity .3s,transform .3s;transform:translateX(-6px)}
a.ra:hover::after{opacity:1;transform:none}
.pied-a{font-family:"SX JB",monospace;font-style:italic;font-size:12px;color:var(--sumi6);text-transform:uppercase;margin-top:-44px}

/* Commande */
.col-cmd{display:flex;flex-direction:column;justify-content:space-between;padding:60px}
.col-cmd>.e{position:relative}
.boite-idee{display:block;height:244px;border:1px solid var(--shu);background:var(--kinari);cursor:text}
.boite-idee .pg{background:var(--kinari);border-color:var(--shu)}
.boite-idee>span{position:absolute;left:16px;top:20px}
.boite-idee textarea{position:absolute;left:16px;top:58px;right:16px;bottom:16px;border:0;background:transparent;resize:none;outline:none;font-family:"SX Fraunces",Georgia,serif;font-variation-settings:"SOFT" 0,"WONK" 1;font-size:22px;line-height:1.35;color:var(--sumi)}
.boite-idee:focus-within{box-shadow:0 0 0 3px rgba(192,56,31,.12)}
.souligne{display:inline-block;align-self:flex-start;padding-bottom:22px;border-bottom:2px solid var(--shu)}
.devis{align-self:flex-start}
.devis.envoye{background:var(--sumi)}

/* Agenda */
.carte-ag{width:868px;height:97px;background:var(--kin);border:1px solid var(--kinari);display:flex;align-items:flex-start;gap:48px;padding:0 40px;transition:transform .4s cubic-bezier(.2,.7,.2,1)!important}
.carte-ag .pg{background:#413217;border-color:var(--kinari)}
.carte-ag:hover{transform:translateX(8px)!important}
.ag-q{flex:1;display:flex;white-space:nowrap;gap:48px;font-family:"SX JB",monospace;font-size:11px;text-transform:uppercase;color:var(--kinari);padding-top:22px}
.ag-q .sumi{color:var(--sumi)}
.ag-t{display:flex;flex-direction:column;gap:10px;color:var(--kinari);padding-top:16px;white-space:nowrap}
.ag-t b{font-weight:600;font-size:26px;line-height:1.1}
.ag-t i{font-size:20px;line-height:1.1}
.tag-ag{width:78px;margin-top:15px;border:1px solid var(--sumi);padding:5px;font-family:"SX JB",monospace;font-size:11px;text-transform:uppercase;color:var(--sumi)}
.saison{font-family:"SX JB",monospace;font-weight:700;font-size:25px;color:var(--kin)}

/* S'inscrire */
.porte{display:flex;flex-direction:column;gap:44px;color:var(--kinari)}
.porte b{font-weight:400;font-size:40px;line-height:1.1;margin-bottom:-36px}
.porte span{font-size:30px;line-height:1.1;color:var(--gris)}
.porte hr{border:0;border-top:1px solid var(--kinari);margin:0;width:100%}
.porte p{font-size:30px;line-height:1.2;color:var(--gris)}
.porte .bt{align-self:flex-start}
.pa[data-p="inscrire"] .porte{transition:opacity .7s,transform .9s}
.porte:hover p{color:var(--kinari);transition:color .4s}

@media (prefers-reduced-motion:reduce){.sx *{transition-duration:.01s!important;animation:none!important}}
.pa-mat .mat>.e{position:absolute}