/* Khagan — page de garde. Aucune dépendance, aucun JavaScript. Couleurs : celles du logo, rien d'autre. */
@font-face{font-family:"Archivo";font-style:normal;font-weight:400;font-stretch:100%;font-display:swap;src:url("archivo-400.woff2") format("woff2")}
@font-face{font-family:"Archivo";font-style:normal;font-weight:800;font-stretch:100%;font-display:swap;src:url("archivo-800.woff2") format("woff2")}

:root{
  --rouge:#C4121E;
  --rouge-profond:#7D0A12;
  --papier:#F6F6F4;
  --blanc:#FFFFFF;
  --encre:#1B1214;
  --gris:#6B6466;
  --marge:clamp(1.25rem,4vw,3rem);
  color-scheme:light;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{
  margin:0;min-height:100vh;min-height:100dvh;
  display:grid;grid-template-rows:auto 1fr auto;
  background:var(--papier);color:var(--encre);
  font:400 1.0625rem/1.6 "Archivo",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  overflow-x:hidden;
}
a{color:inherit;touch-action:manipulation;-webkit-tap-highlight-color:rgba(196,18,30,.2)}
:focus-visible{outline:3px solid var(--rouge);outline-offset:3px}
.vh{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.skip{position:absolute;left:var(--marge);top:-5rem;z-index:10;padding:.75rem 1rem;background:var(--encre);color:var(--papier);text-decoration:none}
.skip:focus-visible{top:var(--marge)}

/* En-tête, scène et pied de page partagent la même largeur maximale : leurs bords tombent sur les mêmes lignes. */
.entete{display:flex;align-items:center;justify-content:space-between;gap:1rem;width:100%;max-width:90rem;margin:0 auto;padding:clamp(1rem,2.5vw,1.75rem) var(--marge)}
.entete img{display:block;height:2.25rem;width:auto}
.entete>a:hover img{filter:brightness(.88)}
.langue{display:flex;gap:.5rem}
.langue a{
  display:grid;place-items:center;min-width:2.75rem;min-height:2.75rem;padding:0 .75rem;
  border:2px solid var(--encre);text-decoration:none;letter-spacing:.04em;
}
.langue a[aria-current="page"]{background:var(--rouge);border-color:var(--rouge);color:var(--blanc)}
.langue a:not([aria-current]):hover{background:var(--encre);color:var(--papier)}

.scene{
  display:grid;align-items:center;gap:clamp(2rem,5vw,4rem);
  width:100%;max-width:90rem;margin:0 auto;padding:0 var(--marge) clamp(1rem,2.5vw,1.75rem);
}
@media (min-width:56rem){.scene{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr)}}

/* Titre : trois lignes fixes, pour pouvoir les « taper » une à une. Police à sa largeur normale (plus haute que large). */
h1{
  margin:0 0 1.5rem;font-weight:800;line-height:1.04;letter-spacing:-.015em;text-wrap:balance;
  font-size:clamp(2.5rem,.75rem + 5vw,5.5rem);
  font-size:clamp(2.5rem,min(.75rem + 5vw,12svh),5.5rem);
}
h1 .ligne{position:relative;display:block;width:max-content;max-width:100%}
h1 .t{display:block;white-space:nowrap}
.intro{margin:0;max-width:38rem;font-size:clamp(1rem,.95rem + .3vw,1.1875rem)}
.intro a{text-underline-offset:.2em}
.intro a:hover{color:var(--rouge);text-decoration-thickness:2px}

.etat{display:flex;flex-wrap:wrap;align-items:center;gap:.25rem 1.75rem;margin-top:1.75rem}
.statut{display:flex;align-items:center;gap:.75rem;margin:0}
.statut::before{content:"";flex:none;width:.75rem;height:.75rem;background:var(--rouge)}

/* Commande d'arrêt de l'animation du titre : une case à cocher, sans JavaScript (affichée seulement si le mouvement est permis) */
#pause,.pause{display:none}

/* Composition sur une grille de 12 : tous les bords tombent sur un multiple de 1/12.
   Carré K 6×6 en (3,3) ; carré rouge profond 6×6 en (6,0), recouvert au quart par le K ;
   carré encre 3×3 en (0,9), qui touche le K par un coin. Une seule diagonale, haut-droite → bas-gauche. */
.art{position:relative;justify-self:center;width:min(100%,38rem);aspect-ratio:1/1}
@supports (width:1svh){.art{width:min(100%,38rem,max(18rem,calc(100svh - 12rem)))}} /* viser la page entière sans défiler : en-tête + marge + pied ≈ 12rem */
@media (min-width:56rem){.art{justify-self:end}}
.art>*{position:absolute;display:block}
.art .profond{left:50%;top:0;width:50%;aspect-ratio:1;background:var(--rouge-profond)}
.art .k{left:25%;top:25%;width:50%;height:auto}
.art .encre{left:0;top:75%;width:25%;aspect-ratio:1;background:var(--encre)}
@keyframes entree-a{from{opacity:0;transform:translate3d(10%,-10%,0)}}
@keyframes entree-b{from{opacity:0;transform:translate3d(-20%,20%,0)}}
@keyframes entree-k{from{opacity:0;transform:translate3d(0,6%,0)}}

.pied{display:flex;flex-wrap:wrap;justify-content:space-between;gap:1rem;width:100%;max-width:90rem;margin:0 auto;padding:.875rem var(--marge);color:var(--gris);font-size:.9375rem}
.pied small{font-size:inherit}

@media (max-width:30rem){
  .entete img{height:1.875rem}
  .art{width:min(100%,22rem)}
}

/* Par défaut (et si le visiteur demande moins de mouvement) : composition et titre fixes, aucune animation, pas de commande d'arrêt.
   Mouvement permis : entrée des carrés, puis titre « tapé » en boucle (écrire, tenir, effacer), avec commande d'arrêt.
   --x = part de la ligne déjà tapée ; le bloc « typewriter » plus bas la fait avancer. */
@media (prefers-reduced-motion:no-preference){
  .art .profond{animation:entree-a 1.1s cubic-bezier(.2,.7,.2,1) .05s backwards}
  .art .k{animation:entree-k 1.2s cubic-bezier(.2,.7,.2,1) .35s backwards}
  .art .encre{animation:entree-b 1.1s cubic-bezier(.2,.7,.2,1) .2s backwards}
  h1 .t{clip-path:inset(-.25em calc(100% - var(--x,100%)) -.25em 0)}
  h1 .ligne::after{content:"";position:absolute;top:.14em;bottom:.08em;left:var(--x,100%);width:.075em;margin-left:.04em;background:var(--rouge);opacity:0;pointer-events:none}

  /* Commande : cadre noir permanent (comme la bascule de langue) ; en marche = icône stop + « Arrêter », arrêtée = icône lecture + « Lancer » */
  #pause{display:inline-block}
  .pause{
    display:inline-flex;align-items:center;gap:.65rem;min-height:2.75rem;padding:0 1rem;
    border:2px solid var(--encre);font-size:.9375rem;cursor:pointer;user-select:none;touch-action:manipulation;
  }
  .pause::before{content:"";flex:none;width:.7rem;height:.7rem;background:currentColor}
  .pause .on{display:none}
  .pause:hover{background:var(--encre);color:var(--papier)}
  #pause:focus-visible~.scene .pause{outline:3px solid var(--rouge);outline-offset:3px}

  /* arrêt demandé : titre complet, plus de curseur ; décocher relance le cycle */
  #pause:checked~.scene h1 .ligne,#pause:checked~.scene h1 .ligne::after{animation:none}
  #pause:checked~.scene h1 .t{clip-path:none}
  #pause:checked~.scene h1 .ligne::after{display:none}
  #pause:checked~.scene .pause .off{display:none}
  #pause:checked~.scene .pause .on{display:inline}
  #pause:checked~.scene .pause::before{width:.75rem;height:.85rem;clip-path:polygon(0 0,100% 50%,0 100%)}
}

/* >>> typewriter : généré par website/tools/typewriter.py (mesures : typewriter-mesures.json), ne pas modifier à la main */
@keyframes ecrit-fr-1{0%{--x:0%}5.272%{--x:11.056%}6.151%{--x:20.535%}7.03%{--x:26.25%}7.909%{--x:35.821%}8.787%{--x:50.054%}9.666%{--x:59.334%}10.545%{--x:65.049%}11.424%{--x:69.262%}12.302%{--x:77.971%}13.181%{--x:87.294%}14.06%{--x:95.322%}14.938%{--x:calc(100% + .1em)}88.62%{--x:95.322%}89.016%{--x:87.294%}89.411%{--x:77.971%}89.807%{--x:69.262%}90.202%{--x:65.049%}90.598%{--x:59.334%}90.993%{--x:50.054%}91.388%{--x:35.821%}91.784%{--x:26.25%}92.179%{--x:20.535%}92.575%{--x:11.056%}92.97%{--x:0%}}
@keyframes curseur-fr-1{0%{opacity:1}18.014%{opacity:0}88.225%{opacity:1}}
@keyframes ecrit-fr-2{0%{--x:0%}18.893%{--x:15.167%}19.772%{--x:26.957%}20.65%{--x:34.017%}21.529%{--x:39.224%}22.408%{--x:56.814%}23.286%{--x:62.02%}24.165%{--x:72.781%}25.044%{--x:84.3%}25.923%{--x:94.22%}26.801%{--x:calc(100% + .1em)}83.612%{--x:94.22%}84.007%{--x:84.3%}84.402%{--x:72.781%}84.798%{--x:62.02%}85.193%{--x:56.814%}85.589%{--x:39.224%}85.984%{--x:34.017%}86.38%{--x:26.957%}86.775%{--x:15.167%}87.17%{--x:0%}}
@keyframes curseur-fr-2{0%{opacity:0}18.014%{opacity:1}29.877%{opacity:0}83.216%{opacity:1}88.225%{opacity:0}}
@keyframes ecrit-fr-3{0%{--x:0%}30.756%{--x:14.019%}31.634%{--x:25.468%}32.513%{--x:36.913%}33.392%{--x:48.496%}34.271%{--x:53.729%}35.149%{--x:65.312%}36.028%{--x:72.636%}36.907%{--x:84.219%}37.786%{--x:94.19%}38.664%{--x:calc(100% + .1em)}78.603%{--x:94.19%}78.998%{--x:84.219%}79.394%{--x:72.636%}79.789%{--x:65.312%}80.185%{--x:53.729%}80.58%{--x:48.496%}80.975%{--x:36.913%}81.371%{--x:25.468%}81.766%{--x:14.019%}82.162%{--x:0%}}
@keyframes curseur-fr-3{0%{opacity:0}29.877%{opacity:1}43.058%{opacity:0}47.452%{opacity:1}51.845%{opacity:0}56.239%{opacity:1}60.633%{opacity:0}65.026%{opacity:1}69.42%{opacity:0}73.814%{opacity:1}78.207%{opacity:1}83.216%{opacity:0}}
@keyframes ecrit-en-1{0%{--x:0%}5.482%{--x:13.986%}6.396%{--x:25.978%}7.309%{--x:33.207%}8.223%{--x:45.315%}9.137%{--x:63.32%}10.05%{--x:75.06%}10.964%{--x:82.288%}11.878%{--x:94.082%}12.791%{--x:calc(100% + .1em)}89.402%{--x:94.082%}89.813%{--x:82.288%}90.224%{--x:75.06%}90.635%{--x:63.32%}91.046%{--x:45.315%}91.457%{--x:33.207%}91.868%{--x:25.978%}92.28%{--x:13.986%}92.691%{--x:0%}}
@keyframes curseur-en-1{0%{opacity:1}15.989%{opacity:0}88.99%{opacity:1}}
@keyframes ecrit-en-2{0%{--x:0%}16.903%{--x:17.068%}17.816%{--x:30.336%}18.73%{--x:38.282%}19.644%{--x:44.141%}20.557%{--x:63.936%}21.471%{--x:69.795%}22.385%{--x:80.527%}23.298%{--x:93.495%}24.212%{--x:calc(100% + .1em)}84.605%{--x:93.495%}85.016%{--x:80.527%}85.427%{--x:69.795%}85.838%{--x:63.936%}86.249%{--x:44.141%}86.661%{--x:38.282%}87.072%{--x:30.336%}87.483%{--x:17.068%}87.894%{--x:0%}}
@keyframes curseur-en-2{0%{opacity:0}15.989%{opacity:1}27.41%{opacity:0}84.194%{opacity:1}88.99%{opacity:0}}
@keyframes ecrit-en-3{0%{--x:0%}28.323%{--x:12.903%}29.237%{--x:23.441%}30.151%{--x:33.975%}31.064%{--x:44.636%}31.978%{--x:49.453%}32.892%{--x:60.114%}33.805%{--x:66.855%}34.719%{--x:77.463%}35.633%{--x:83.992%}36.546%{--x:94.653%}37.46%{--x:calc(100% + .1em)}78.986%{--x:94.653%}79.397%{--x:83.992%}79.808%{--x:77.463%}80.219%{--x:66.855%}80.63%{--x:60.114%}81.042%{--x:49.453%}81.453%{--x:44.636%}81.864%{--x:33.975%}82.275%{--x:23.441%}82.686%{--x:12.903%}83.097%{--x:0%}}
@keyframes curseur-en-3{0%{opacity:0}27.41%{opacity:1}42.028%{opacity:0}46.597%{opacity:1}51.165%{opacity:0}55.733%{opacity:1}60.302%{opacity:0}64.87%{opacity:1}69.438%{opacity:0}74.006%{opacity:1}78.575%{opacity:1}84.194%{opacity:0}}
@media (prefers-reduced-motion:no-preference){
  html[lang="fr"] .l1{animation:ecrit-fr-1 11.38s step-end infinite}
  html[lang="fr"] .l1::after{animation:curseur-fr-1 11.38s step-end infinite}
  html[lang="fr"] .l2{animation:ecrit-fr-2 11.38s step-end infinite}
  html[lang="fr"] .l2::after{animation:curseur-fr-2 11.38s step-end infinite}
  html[lang="fr"] .l3{animation:ecrit-fr-3 11.38s step-end infinite}
  html[lang="fr"] .l3::after{animation:curseur-fr-3 11.38s step-end infinite}
  html[lang="en"] .l1{animation:ecrit-en-1 10.945s step-end infinite}
  html[lang="en"] .l1::after{animation:curseur-en-1 10.945s step-end infinite}
  html[lang="en"] .l2{animation:ecrit-en-2 10.945s step-end infinite}
  html[lang="en"] .l2::after{animation:curseur-en-2 10.945s step-end infinite}
  html[lang="en"] .l3{animation:ecrit-en-3 10.945s step-end infinite}
  html[lang="en"] .l3::after{animation:curseur-en-3 10.945s step-end infinite}
}
/* <<< typewriter */