/* ---------- accueil ---------- */
.home{min-height:100%;position:relative;overflow:hidden;padding-inline:16px;padding-block:0 48px;background:var(--ink)}
.home .hbg{position:absolute;inset:0;background-size:cover;background-position:center;opacity:.9;pointer-events:none}
.home .hbg::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 30% 20%,transparent 30%,var(--ink) 85%)}
.home .wrap{position:relative;max-width:1240px;margin-inline:auto;display:grid;gap:40px}
.hero{display:grid;grid-template-columns:auto minmax(0,1fr);gap:28px;align-items:end;padding-top:clamp(40px,9vh,110px);position:relative}
.hero .rail{width:46px;align-self:stretch;min-height:200px;background:#fff;-webkit-mask:var(--hatchm) 0 0/100% 100% no-repeat;mask:var(--hatchm) 0 0/100% 100% no-repeat;opacity:.9}
.hero h1{margin:0;font-family:var(--f-pro),"ArgusBebas",sans-serif;font-weight:400;font-size:clamp(84px,17vw,230px);line-height:.82;letter-spacing:.01em;transform-origin:0 100%}
.hero h1 b{color:var(--acc);font-weight:400}
.hero .tool{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 18px;margin-top:14px}
.hero .tool [contenteditable]{font-family:var(--f-pro),"ArgusBebas",sans-serif;font-size:clamp(34px,5.4vw,68px);line-height:1;letter-spacing:.06em;outline:none;border-bottom:2px dashed transparent;padding:0 4px}
.hero .tool [contenteditable]:hover{border-bottom-color:var(--line)}
.hero .tool [contenteditable]:focus{border-bottom-color:var(--acc)}
.hero .sub{font-size:11px;letter-spacing:.32em;text-transform:uppercase;color:var(--mute)}
.hero .chev{height:30px;margin-top:22px;background:#fff;opacity:.85;-webkit-mask:var(--chevm) 0 0/auto 100% repeat-x;mask:var(--chevm) 0 0/auto 100% repeat-x;max-width:720px}
.hero .icons{position:absolute;right:0;top:28px;width:140px;height:33px;background:#fff;-webkit-mask:var(--iconsm) 0 0/100% 100% no-repeat;mask:var(--iconsm) 0 0/100% 100% no-repeat;opacity:.85}
.shead{display:flex;justify-content:space-between;align-items:baseline;gap:12px;border-bottom:1px solid var(--line);padding-bottom:8px;flex-wrap:wrap}
.shead h2{margin:0;font-family:"ArgusBebas",sans-serif;font-weight:400;font-size:32px;letter-spacing:.06em}
.shead span{color:var(--mute);font-size:11px}
.tpls{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:20px}
.tpl{background:rgba(19,20,26,.88);border:1px solid var(--line);display:grid;grid-template-rows:auto 1fr;min-width:0;clip-path:polygon(18px 0,100% 0,100% calc(100% - 18px),calc(100% - 18px) 100%,0 100%,0 18px)}
.tpl .th{aspect-ratio:16/10;background:#08080b center/contain no-repeat;border-bottom:1px solid var(--line);position:relative}
.tpl .th .fmt{position:absolute;left:10px;bottom:10px;font-size:10px;letter-spacing:.12em;background:rgba(8,8,11,.8);padding:4px 7px;border:1px solid var(--line)}
.tpl .bd{padding:14px 16px 16px;display:grid;gap:10px;align-content:start}
.tpl h3{margin:0;font-family:"ArgusBebas",sans-serif;font-weight:400;font-size:30px;letter-spacing:.04em;display:flex;gap:10px;align-items:baseline;flex-wrap:wrap}
.tpl h3 small{font-family:var(--ui);font-size:10px;letter-spacing:.14em;color:var(--mute);text-transform:uppercase}
.tpl p{margin:0;color:#c3c5ce;line-height:1.5}
.tpl .mine{display:flex;flex-wrap:wrap;gap:5px}
.tpl .mine button{font-size:11px;padding:5px 8px}
.tpl .go{justify-self:start}
.tpl.soon{border-style:dashed;background:transparent;clip-path:none}
.tpl.soon .bd{align-content:center;min-height:200px}
.foot{color:var(--mute);font-size:11px;line-height:1.6;max-width:760px}
/* ---------- couverture Démiurgos : affiche sombre, symétrique, une seule couleur lumineuse ---------- */
.home{padding:0;--glow:#f2f1ff;background:#050507}
.home,.pz{--glow-soft:color-mix(in srgb,var(--glow) 45%,transparent)}
.pz-sw{display:flex;gap:8px;pointer-events:auto}
.pz-sw button{width:16px;height:16px;padding:0;border-radius:50%;background:var(--c);border:1px solid rgba(255,255,255,.3);clip-path:none;box-shadow:0 0 8px var(--c)}
.pz-sw button[aria-pressed="true"]{outline:1px solid var(--c);outline-offset:3px}
.pz{--glow-soft:color-mix(in srgb,var(--glow) 45%,transparent)}
.home .wrap{padding-inline:16px;padding-top:40px}
.pz{position:relative;min-height:100vh;min-height:100dvh;overflow:hidden;background:#050507;display:grid;place-items:center;padding:28px 16px 34px;box-sizing:border-box;color:var(--glow)}
.pz::before{content:"";position:absolute;inset:0;background:var(--grainimg) 0 0/1920px 1080px;mix-blend-mode:screen;opacity:.55;pointer-events:none}
.pz::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 60% 55% at 50% 45%,rgba(125,162,255,.07),transparent 70%),radial-gradient(ellipse at center,transparent 50%,rgba(0,0,0,.75));pointer-events:none}
.pz > *{position:relative;z-index:1}
.pz-col{display:flex;flex-direction:column;align-items:center;gap:clamp(10px,2vh,22px);width:min(100%,980px);text-align:center}
.pz-top{display:flex;justify-content:space-between;width:100%;font-family:var(--ui);font-size:10.5px;letter-spacing:.22em;color:color-mix(in srgb,var(--glow) 70%,transparent)}
.pz-circle{width:clamp(56px,8vh,96px);aspect-ratio:1;border-radius:50%;border:1px solid rgba(220,226,255,.45)}
.pz-emb{width:min(92%,760px);max-height:30vh;height:auto;overflow:visible}
.pz-emb polygon,.pz-legs polygon{fill:var(--glow)}
.pz-emb .ring{fill:none;stroke:var(--glow);stroke-width:1.2;opacity:.6}
.pz-emb > g,.pz-legs > g{filter:drop-shadow(0 0 5px var(--glow-soft)) drop-shadow(0 0 18px color-mix(in srgb,var(--glow) 32%,transparent))}
.pz-legs{width:clamp(180px,34vmin,340px);max-height:24vh;height:auto;overflow:visible}
/* ⚠️ `vmin` ET NON `vw` : les tailles suivent la PLUS PETITE dimension de la
   fenêtre. Calées sur la largeur seule, elles donnaient un titre de 130 px sur
   un écran large mais bas (1800 × 760) — la lune était coupée en haut, les
   lances en bas, et le bouton « ENTRER » sortait de l'écran. Comme `.pz` est
   en `overflow:hidden`, tout cela disparaissait sans un mot. */
.pz-title{margin:0;font-family:"Bodoni Moda","Didot","Times New Roman",serif;font-weight:800;font-size:clamp(28px,11vmin,118px);line-height:.9;letter-spacing:-.01em;color:var(--glow);
  transform:scaleX(1.42);transform-origin:50% 50%;text-shadow:0 0 3px var(--glow-soft),0 0 14px color-mix(in srgb,var(--glow) 25%,transparent);white-space:nowrap}
.pz-sub{margin:0;font-family:"Archivo","Arial Black",sans-serif;font-stretch:125%;font-weight:900;font-size:clamp(17px,4.9vmin,44px);line-height:1;letter-spacing:.01em;color:var(--glow);text-shadow:0 0 3px var(--glow-soft),0 0 12px color-mix(in srgb,var(--glow) 22%,transparent)}
.pz-low{display:grid;grid-template-columns:1fr auto 1fr;align-items:start;width:min(100%,640px);gap:10px}
.pz-low > span{font-family:"Archivo","Arial Black",sans-serif;font-stretch:125%;font-weight:900;font-size:clamp(16px,3.2vmin,28px);text-shadow:0 0 4px var(--glow-soft);margin-top:3%}
.pz-low > span:first-child{justify-self:end}.pz-low > span:last-child{justify-self:start}
.pz-side{position:absolute;top:50%;font-family:var(--ui);font-size:10.5px;letter-spacing:.2em;line-height:1.9;color:color-mix(in srgb,var(--glow) 55%,#8a8a96);white-space:nowrap}
.pz-side b{display:block;font-family:"Archivo",sans-serif;font-stretch:125%;font-weight:900;font-size:22px;letter-spacing:.04em;color:rgba(220,226,255,.85)}
.pz-side.l{left:26px;transform:translateY(-50%) rotate(-90deg) translateX(-50%);transform-origin:0 0}
.pz-side.r{right:26px;transform:translateY(-50%) rotate(90deg) translateX(50%);transform-origin:100% 0}
.pz-enter{margin-top:6px;font-family:var(--ui);font-size:12px;letter-spacing:.42em;padding:12px 22px 12px 26px;background:transparent;color:var(--glow);border:1px solid color-mix(in srgb,var(--glow) 60%,transparent);clip-path:none;text-shadow:0 0 6px var(--glow);box-shadow:0 0 18px color-mix(in srgb,var(--glow) 15%,transparent) inset}
.pz-enter:hover{background:rgba(125,162,255,.12);border-color:var(--glow)}
.pz-foot{align-items:center;position:absolute;z-index:2;left:0;right:0;bottom:14px;display:flex;justify-content:space-between;padding-inline:24px;font-family:var(--ui);font-size:10px;letter-spacing:.2em;color:color-mix(in srgb,var(--glow) 55%,transparent)}
@media (prefers-reduced-motion:no-preference){
  .pz.anim .pz-emb :is(path,circle):not(.f),.pz.anim .pz-legs :is(path,circle):not(.f){stroke-dasharray:var(--L);stroke-dashoffset:var(--L);animation:pzDraw 1.6s cubic-bezier(.6,.05,.3,1) var(--d,0s) forwards}
  .pz.anim .pz-emb .f,.pz.anim .pz-legs .f{opacity:0;animation:pzOn .6s ease var(--d2,1.4s) forwards}
  .pz.anim .pz-title,.pz.anim .pz-sub,.pz.anim .pz-low > span,.pz.anim .pz-enter{animation:pzIn .9s ease var(--d3,1.4s) backwards}
  .pz-circle{animation:pzBreath 6s ease-in-out infinite}
}
@keyframes pzDraw{to{stroke-dashoffset:0}}
@keyframes pzOn{to{opacity:1}}
@keyframes pzIn{from{opacity:0;filter:blur(6px)}}
@keyframes pzBreath{50%{box-shadow:0 0 22px rgba(125,162,255,.25)}}
@media (max-width:760px){.pz-side{display:none}.pz-top{font-size:9px;letter-spacing:.14em}}
.tpl .num{font-family:var(--ui);font-size:11px;letter-spacing:.12em;color:var(--mute)}
.tpl{position:relative}
.tpl::before{content:"";position:absolute;left:18px;top:0;width:44px;height:3px;background:var(--glow);box-shadow:0 0 8px var(--glow);z-index:1}
.shead h2{color:var(--glow);text-shadow:0 0 12px var(--glow-soft)}

/* ---------- animation de la couverture ---------- */
.pz-emb polygon{transform-box:view-box;transform-origin:500px 280px}
.pz-legs polygon{transform-box:view-box;transform-origin:500px 0px}
.pz-scan{position:absolute;left:0;right:0;height:22vh;top:-25vh;pointer-events:none;z-index:2;
  background:linear-gradient(180deg,transparent,color-mix(in srgb,var(--glow) 2.5%,transparent) 75%,color-mix(in srgb,var(--glow) 9%,transparent) 99.5%,transparent)}
.pz-moon{position:relative}
.pz-moon i{position:absolute;width:7px;height:7px;border-radius:50%;background:var(--glow);box-shadow:0 0 10px var(--glow);left:50%;top:50%;margin:-3.5px}
.pz-title .sw{position:relative;display:inline-block}
.pz-par{transition:transform .6s cubic-bezier(.2,.7,.2,1);will-change:transform}
@media (prefers-reduced-motion:no-preference){
  .pz.go .pz-emb polygon{animation:wing 1.1s cubic-bezier(.2,.9,.2,1) both;animation-delay:var(--wd,0s)}
  .pz.go .pz-emb .ring{animation:ringIn 1.4s ease .6s both}
  .pz.go .pz-legs polygon{animation:lance .9s cubic-bezier(.7,0,.2,1) both;animation-delay:var(--wd,1.4s)}
  .pz.go .pz-title{animation:neon 1.6s steps(1) .9s both}
  .pz.go .pz-sub{animation:rise .8s ease 1.5s both}
  .pz.go .pz-low > span{animation:rise .8s ease 1.9s both}
  .pz.go .pz-enter{animation:rise .8s ease 2.3s both,breathe 3.2s ease-in-out 3.2s infinite}
  .pz.go .pz-side,.pz.go .pz-top,.pz.go .pz-foot{animation:fade 1.2s ease 2s both}
  .pz.go .pz-circle{animation:moonIn 1.2s ease .2s both,pzBreath 6s ease-in-out 1.4s infinite}
  .pz-moon i{animation:orbit 9s linear infinite}
  .pz.go .pz-emb > g,.pz.go .pz-legs > g{animation:glowPulse 4.5s ease-in-out 2.4s infinite}
  .pz.go .pz-floatA{animation:float 7s ease-in-out 2.4s infinite}
  .pz.go .pz-scan{animation:sweep 11s cubic-bezier(.5,0,.5,1) 2.6s infinite}
  .pz.go .pz-title{text-shadow:0 0 3px var(--glow-soft),0 0 14px color-mix(in srgb,var(--glow) 25%,transparent)}
}
@keyframes wing{0%{transform:scale(.05) rotate(var(--wr,0deg));opacity:0}60%{opacity:1}100%{transform:none;opacity:1}}
@keyframes lance{0%{transform:scaleY(0);opacity:0}100%{transform:none;opacity:1}}
@keyframes ringIn{from{opacity:0;transform:scale(.4)}to{opacity:.6;transform:none}}
@keyframes neon{0%{opacity:0}8%{opacity:1}12%{opacity:.15}20%{opacity:1}26%{opacity:.4}30%,100%{opacity:1}}
@keyframes rise{from{opacity:0;transform:translateY(14px);filter:blur(4px)}}
@keyframes fade{from{opacity:0}}
@keyframes moonIn{from{opacity:0;transform:translateY(-20px) scale(.6)}}
@keyframes orbit{from{transform:rotate(0) translateX(calc(clamp(56px,8vh,96px) / 2 + 6px))}to{transform:rotate(360deg) translateX(calc(clamp(56px,8vh,96px) / 2 + 6px))}}
@keyframes glowPulse{50%{filter:drop-shadow(0 0 4px var(--glow-soft)) drop-shadow(0 0 18px color-mix(in srgb,var(--glow) 30%,transparent))}}
@keyframes float{50%{transform:translateY(-8px)}}
@keyframes sweep{0%{top:-25vh}45%,100%{top:110vh}}
@keyframes breathe{50%{box-shadow:0 0 26px color-mix(in srgb,var(--glow) 40%,transparent) inset,0 0 18px color-mix(in srgb,var(--glow) 35%,transparent)}}
.pz-parts{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0}

/* ---------- section modèles ---------- */
.md{position:relative;background:#050507;padding:clamp(56px,10vh,110px) 16px 40px;color:var(--glow);overflow:hidden}
.md::before{content:"";position:absolute;inset:0;background:var(--grainimg) 0 0/1920px 1080px;mix-blend-mode:screen;opacity:.45;pointer-events:none}
.md::after{content:"";position:absolute;left:50%;top:0;width:1px;height:clamp(40px,8vh,90px);background:linear-gradient(var(--glow),transparent);opacity:.6}
.md > *{position:relative}
.md-head{display:grid;justify-items:center;gap:10px;text-align:center;margin-bottom:clamp(36px,6vh,64px)}
.md-lbl{font-family:var(--ui);font-size:11px;letter-spacing:.3em;color:color-mix(in srgb,var(--glow) 70%,#8a8a96)}
.md-title{margin:0;font-family:"Bodoni Moda",Didot,"Times New Roman",serif;font-weight:800;font-size:clamp(40px,6.5vw,92px);line-height:.95;transform:scaleX(1.42);
  text-shadow:0 0 3px var(--glow-soft),0 0 14px color-mix(in srgb,var(--glow) 25%,transparent)}
.md-sub{margin:0;font-family:"Archivo","Arial Black",sans-serif;font-stretch:125%;font-weight:900;font-size:clamp(13px,1.6vw,20px);letter-spacing:.04em}
.md-rule{display:flex;align-items:center;gap:10px;width:min(420px,80%);margin-top:6px}
.md-rule i{flex:1;height:1px;background:color-mix(in srgb,var(--glow) 45%,transparent)}
.md-rule b{width:9px;height:9px;transform:rotate(45deg);background:var(--glow);box-shadow:0 0 8px var(--glow-soft)}
.md-grid{max-width:1280px;margin-inline:auto;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,320px),1fr));gap:28px}
.md-card{position:relative;display:grid;gap:14px;align-content:start;padding:18px;border:1px solid color-mix(in srgb,var(--glow) 22%,transparent);background:linear-gradient(180deg,color-mix(in srgb,var(--glow) 5%,transparent),transparent 40%);transition:border-color .3s,background .3s}
.md-card:hover{border-color:color-mix(in srgb,var(--glow) 55%,transparent);background:linear-gradient(180deg,color-mix(in srgb,var(--glow) 9%,transparent),transparent 50%)}
.md-card .cn{position:absolute;width:14px;height:14px;border:2px solid var(--glow);opacity:.8}
.cn.tl{left:-2px;top:-2px;border-right:0;border-bottom:0}.cn.tr{right:-2px;top:-2px;border-left:0;border-bottom:0}
.cn.bl{left:-2px;bottom:-2px;border-right:0;border-top:0}.cn.br{right:-2px;bottom:-2px;border-left:0;border-top:0}
.md-top{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.md-num{font-family:"Archivo","Arial Black",sans-serif;font-stretch:125%;font-weight:900;font-size:30px;line-height:1;text-shadow:0 0 4px var(--glow-soft)}
.md-kind{font-family:var(--ui);font-size:10.5px;letter-spacing:.16em;color:color-mix(in srgb,var(--glow) 60%,#8a8a96)}
.md-th{position:relative;aspect-ratio:16/10;background:#08080c center no-repeat;border:1px solid color-mix(in srgb,var(--glow) 18%,transparent);transition:filter .5s}
.md-th::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(0deg,rgba(0,0,0,.28) 0 1px,transparent 1px 3px),linear-gradient(color-mix(in srgb,var(--glow) 35%,transparent),color-mix(in srgb,var(--glow) 35%,transparent));mix-blend-mode:normal;opacity:.12;transition:opacity .5s}
.md-card:hover .md-th{filter:brightness(1.08)}.md-card:hover .md-th::after{opacity:.06}
.md-void{display:grid;place-items:center;filter:none;background:repeating-linear-gradient(-45deg,color-mix(in srgb,var(--glow) 8%,transparent) 0 1px,transparent 1px 12px)}
.md-void::after{display:none}
.md-void span{font-family:"Bodoni Moda",serif;font-size:64px;opacity:.6}
.md-name{margin:0;font-family:"Bodoni Moda",Didot,serif;font-weight:800;font-size:clamp(24px,2.2vw,32px);line-height:1;transform:scaleX(1.18);transform-origin:0 50%;text-shadow:0 0 3px var(--glow-soft)}
.md-desc{margin:0;font-family:var(--ui);font-size:12.5px;line-height:1.65;color:#a9a7b8}
.md-meta{display:flex;gap:8px;flex-wrap:wrap}
.md-meta span{font-family:var(--ui);font-size:10.5px;letter-spacing:.16em;padding:4px 8px;border:1px solid color-mix(in srgb,var(--glow) 30%,transparent)}
.md-mine{display:flex;flex-wrap:wrap;gap:6px}
.md-mine button{font-family:var(--ui);font-size:11px;padding:5px 8px;background:transparent;color:#cfcbe0;border:1px solid #2a2836;clip-path:none}
.md-mine button:hover{border-color:var(--glow);color:var(--glow)}
.md-go{justify-self:start;margin-top:4px;font-family:var(--ui);font-size:12px;letter-spacing:.38em;padding:11px 20px 11px 24px;background:transparent;color:var(--glow);border:1px solid color-mix(in srgb,var(--glow) 60%,transparent);clip-path:none}
.md-go:hover{background:color-mix(in srgb,var(--glow) 14%,transparent);border-color:var(--glow)}
.md-card.soon{border-style:dashed;background:transparent}
.md-foot{max-width:1280px;margin:56px auto 0;padding-top:16px;border-top:1px solid color-mix(in srgb,var(--glow) 18%,transparent);display:flex;justify-content:space-between;gap:12px 24px;flex-wrap:wrap;font-family:var(--ui);font-size:10px;letter-spacing:.2em;color:color-mix(in srgb,var(--glow) 55%,#6d6880)}

/* Écrans étroits : les étiquettes latérales sont pivotées à 90° avec
   `white-space:nowrap`. Sur un téléphone elles mordent sur le titre, sans que
   rien ne puisse les replier — on les retire plutôt que de les laisser se
   chevaucher. Le pied de page passe en colonne pour la même raison. */
@media (max-width: 560px){
  .pz-side{display:none}
  .pz-foot{flex-direction:column;gap:6px;text-align:center;padding-inline:12px}
}

/* Bandeau d'accueil : la couverture réduite, posée au-dessus des modèles.
   Plus de plein écran ni de `min-height` — elle ne prend que ce qu'il lui
   faut, et les modèles commencent juste dessous. */
.pz.pz-bande{min-height:0;padding:22px 16px 26px}
.pz.pz-bande .pz-emb{max-height:16vh}
.pz.pz-bande .pz-title{font-size:clamp(26px,7vmin,76px)}
.pz.pz-bande .pz-sub{font-size:clamp(13px,3vmin,26px)}
.pz.pz-bande .pz-col{gap:clamp(6px,1.2vh,14px)}
.pz.pz-bande .pz-side,.pz.pz-bande .pz-foot{display:none}