/* Hyalos Systems — feuille de style commune à toutes les pages.
   Valeurs reprises de la maquette validée (maquette/index.html, 2026-10-19). */

/* Polices auto-hébergées, sous-ensemble latin (SIL Open Font License 1.1,
   voir fonts/OFL-*.txt). Aucun appel à un serveur tiers. */
@font-face{font-family:"Sora";font-style:normal;font-weight:500 700;font-display:swap;src:url("fonts/sora-latin.woff2") format("woff2");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:"IBM Plex Sans";font-style:normal;font-weight:400 500;font-display:swap;src:url("fonts/ibm-plex-sans-latin.woff2") format("woff2");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:"IBM Plex Mono";font-style:normal;font-weight:400;font-display:swap;src:url("fonts/ibm-plex-mono-400-latin.woff2") format("woff2");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:"IBM Plex Mono";font-style:normal;font-weight:500;font-display:swap;src:url("fonts/ibm-plex-mono-500-latin.woff2") format("woff2");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}

/* Base. La marge de défilement garde les ancres et le focus clavier hors de l'en-tête fixe. */
html{scroll-padding-top:120px}
body{margin:0;background:#0B0E0C}
a{color:#4CC9F0}a:hover{color:#8FDDF6}
.mono{font-family:"IBM Plex Mono",monospace}
.navlink{color:#C9CEC8;text-decoration:none}
.navlink:hover{color:#3DFF7F}
.flip-btn:focus-visible,.cta:focus-visible,input:focus-visible,textarea:focus-visible,.navlink:focus-visible,.link:focus-visible{outline:2px solid #3DFF7F;outline-offset:2px}

/* Page, quadrillage et agents */
.kpage{position:relative;overflow:clip;min-height:100vh;background:#0B0E0C;color:#E6E8E3;font-family:"IBM Plex Sans",sans-serif}
.kpage>main,.kpage>section,.kpage>footer{position:relative;z-index:1}
.kgrid{position:absolute;inset:0;z-index:0;background-image:linear-gradient(#232925 1px,transparent 1px),linear-gradient(90deg,#232925 1px,transparent 1px);background-size:120px 120px;background-position:calc(50% - 720px) 0}
.kdots{position:absolute;inset:0}
/* Trajets (offset-path) et durées posés par hyalos.js selon la taille réelle de la page. */
.kdot{position:absolute;left:0;top:0;width:6px;height:6px;border-radius:50%;box-shadow:0 0 12px 3px;opacity:.9;offset-rotate:0deg;animation:kmove linear infinite}
.kdots.is-paused .kdot{animation-play-state:paused}
@keyframes kmove{from{offset-distance:0%}to{offset-distance:100%}}

/* Mise en page */
.wrap{max-width:1200px;margin:0 auto}
.section{border-top:1px solid #1E2420}
.kicker{font-family:"IBM Plex Mono",monospace;font-size:13px;letter-spacing:.18em;text-transform:uppercase;color:#3DFF7F;margin-bottom:14px}
.h2{margin:0;font-family:"Sora",sans-serif;font-weight:600;font-size:40px;letter-spacing:-.01em;color:#F2F3EF}
.cta{display:inline-flex;align-items:center;min-height:48px;padding:0 26px;background:#4CC9F0;color:#0B0E0C;border:0;font-family:"IBM Plex Sans",sans-serif;font-weight:500;font-size:16px;text-decoration:none;border-radius:2px;cursor:pointer;transition:filter .2s}
.cta:hover{color:#0B0E0C;filter:brightness(1.15)}
.ghost{display:inline-flex;align-items:center;min-height:48px;padding:0 26px;border:1px solid #2E3530;background:#0B0E0C;font-size:16px;border-radius:2px}
.link,.link:hover{font-family:"IBM Plex Mono",monospace;font-size:13px;color:#4CC9F0}

/* En-tête fixe */
.site-header{position:sticky;top:0;z-index:10;border-bottom:1px solid #1E2420;background:rgba(11,14,12,.72);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.site-header .wrap{padding:16px 24px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px}
.brand{display:flex;align-items:center;gap:18px}
.brand-text{display:flex;flex-direction:column;gap:4px}
.brand-name{font-family:"Sora",sans-serif;font-weight:700;font-size:30px;letter-spacing:.14em;line-height:1;color:#F2F3EF}
.brand-sub{font-family:"IBM Plex Mono",monospace;font-weight:500;font-size:13px;letter-spacing:.5em;color:#3DFF7F}
.nav{display:flex;flex-wrap:wrap;gap:28px;font-family:"IBM Plex Mono",monospace;font-size:13px;letter-spacing:.08em;text-transform:uppercase}

/* Accueil */
.hero .wrap{padding:120px 24px}
.hero .kicker{margin-bottom:28px}
.hero-title{margin:0;max-width:880px;font-family:"Sora",sans-serif;font-weight:600;font-size:64px;line-height:1.08;letter-spacing:-.02em;color:#F2F3EF}
.lead{margin:32px 0 0;max-width:620px;font-size:19px;line-height:1.6;color:#B8BEB7}
.actions{display:flex;flex-wrap:wrap;gap:16px;margin-top:44px}

.works .wrap{padding:88px 24px 104px}
.section-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:48px}
.hint{font-family:"IBM Plex Mono",monospace;font-size:13px;color:#8C958D}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(320px,100%),1fr));gap:28px;align-items:start}

/* Cartes qui se retournent. Hauteurs calculées dans hyalos.js : au repos, celle du recto
   le plus haut ; retournée, celle de son verso si elle est plus grande. */
.flip{perspective:1600px;height:480px;transition:height .5s cubic-bezier(.2,.7,.2,1)}
.flip-inner{position:relative;width:100%;height:100%;transition:transform .7s cubic-bezier(.2,.7,.2,1);transform-style:preserve-3d}
.flip-inner.is-flipped{transform:rotateY(180deg)}
.face{position:absolute;top:0;left:0;right:0;box-sizing:border-box;-webkit-backface-visibility:hidden;backface-visibility:hidden;display:flex;flex-direction:column;overflow:hidden;background:#111513;border:1px solid #222924;border-top:1px solid #A3214C}
.face-back{transform:rotateY(180deg);border-top-color:#4CC9F0;padding:28px;gap:16px}
.shot{height:210px;display:flex;flex-direction:column;border-bottom:1px solid #222924;background-image:linear-gradient(rgba(61,255,127,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(61,255,127,.05) 1px,transparent 1px);background-size:24px 24px}
.shot-bar{height:30px;display:flex;align-items:center;padding:0 14px;border-bottom:1px solid #1C221E;font-family:"IBM Plex Mono",monospace;font-size:12px;color:#8C958D}
.shot img{flex:1;min-height:0;width:100%;object-fit:cover;object-position:top left;display:block}
.shot img.top-center{object-position:top center}
.card-body{flex:1;display:flex;flex-direction:column;gap:12px;padding:24px}
.tag-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px}
.tag{font-family:"IBM Plex Mono",monospace;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:#3DFF7F}
.badge{padding:3px 8px;border:1px solid #FFB23F;color:#FFB23F;font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.1em;text-transform:uppercase}
.card-title{margin:0;font-family:"Sora",sans-serif;font-weight:600;font-size:26px;color:#F2F3EF}
.card-text{margin:0;font-size:16px;line-height:1.55;color:#C9CEC8}
.card-foot{margin-top:auto}
.back-foot{margin-top:auto;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px}
.points{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:14px;font-size:15px;line-height:1.55;color:#D4D8D2}
.points li::marker{color:#A3214C}
.punch{margin:0;font-family:"Sora",sans-serif;font-size:17px;line-height:1.4;color:#F2F3EF}
.flip-btn{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:0 18px;background:transparent;border:1px solid #2E3530;color:#E6E8E3;font-family:"IBM Plex Mono",monospace;font-size:13px;border-radius:2px;cursor:pointer;transition:border-color .2s,color .2s}
.flip-btn:hover{border-color:#3DFF7F;color:#3DFF7F}

/* Méthode */
.split{padding:88px 24px;display:flex;flex-wrap:wrap;gap:48px;align-items:center}
.split>div{flex:1 1 300px}
.split>p{flex:2 1 480px;margin:0;font-size:19px;line-height:1.6;color:#B8BEB7}

/* Contact */
.contact .wrap{padding:88px 24px 104px;display:flex;flex-wrap:wrap;gap:56px}
.contact-intro{flex:1 1 300px}
.contact-intro .h2{margin:0 0 20px}
.contact-intro p{margin:0;font-size:17px;line-height:1.6;color:#B8BEB7}
.form{flex:2 1 480px;display:flex;flex-direction:column;gap:20px}
.form-row{display:flex;flex-wrap:wrap;gap:20px}
.field{display:flex;flex-direction:column;gap:8px;font-family:"IBM Plex Mono",monospace;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:#9AA39C}
.form-row .field{flex:1 1 220px}
.field input,.field textarea{background:#111513;border:1px solid #2E3530;color:#E6E8E3;font-family:"IBM Plex Sans",sans-serif;font-size:16px;border-radius:2px}
.field input{min-height:48px;padding:0 14px}
.field textarea{padding:12px 14px;line-height:1.5;resize:vertical}
.consent{display:flex;align-items:flex-start;gap:12px;font-size:14px;line-height:1.5;color:#B8BEB7}
.consent input{width:18px;height:18px;margin-top:2px;accent-color:#3DFF7F}
.consent a,.consent a:hover{color:#4CC9F0}
.form .cta{padding:0 30px}
.form-msg{margin:0;font-size:16px;line-height:1.55}
.form-msg:empty{display:none}
.form-msg.is-ok{color:#E6E8E3}
.form-msg.is-err{color:#FFB23F}

/* Pied de page */
.site-footer .wrap{padding:28px 24px 40px;display:flex;flex-wrap:wrap;justify-content:space-between;gap:16px;font-family:"IBM Plex Mono",monospace;font-size:12px;color:#8C958D}

/* Pages de texte : mentions légales, page introuvable */
.doc{max-width:720px;margin:0 auto;padding:88px 24px 104px;font-size:16px;line-height:1.65;color:#C9CEC8}
.doc h1{margin:0}
.doc .intro{margin:16px 0 0;font-family:"IBM Plex Mono",monospace;font-size:13px;color:#8C958D}
.doc section{margin-top:56px;padding-top:40px;border-top:1px solid #1E2420}
.doc h2{margin:0 0 20px;font-family:"Sora",sans-serif;font-weight:600;font-size:26px;line-height:1.3;color:#F2F3EF}
.doc h3{margin:28px 0 10px;font-family:"IBM Plex Mono",monospace;font-weight:400;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:#3DFF7F}
.doc p,.doc ul{margin:0 0 14px}
.doc ul{padding-left:18px}
.doc li{margin-bottom:6px}
.doc li::marker{color:#A3214C}
.doc strong{font-weight:500;color:#F2F3EF}
.panel{margin:24px 0;padding:20px 24px 6px;background:#111513;border:1px solid #222924;border-top:1px solid #A3214C}
.panel h3,.panel .tag{display:block;margin:0 0 10px}
.doc .note{font-size:14px;color:#9AA39C}
.doc .last-update{margin-top:56px;padding-top:20px;border-top:1px solid #1E2420;font-family:"IBM Plex Mono",monospace;font-size:12px;color:#8C958D}
.doc .back{margin-top:24px}

/* Page introuvable (maquette/404.html) */
.kpage.is-404{display:flex;flex-direction:column}
.e404{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:28px;padding:64px 24px 96px;text-align:center}
.e404 .kicker{margin:0}
.e404-title{margin:0;font-family:"Sora",sans-serif;font-weight:600;font-size:48px;letter-spacing:-.01em;color:#F2F3EF}
.lost{animation:drift 7s ease-in-out infinite alternate}
.lost2{animation-duration:9s;animation-delay:-3s}
.lost3{animation-duration:8s;animation-delay:-5s}
@keyframes drift{from{transform:translate(0,0)}to{transform:translate(14px,-18px)}}

@media (max-width:720px){html{scroll-padding-top:156px}.hero-title{font-size:40px}.h2{font-size:30px}.big404{width:280px;height:280px}.e404-title{font-size:34px}}
@media (prefers-reduced-motion:reduce){.flip-inner,.flip{transition:none}.kdot{display:none}.lost{animation:none}}

/* Carte PARVIS et ARPENT : visuel SVG inline (pas d'<img>) et paragraphes de verso. */
.shot svg{flex:1;min-height:0;width:100%;display:block}
.back-text{margin:0;font-size:15px;line-height:1.55;color:#D4D8D2}
.back-text strong{color:#F2F3EF}
/* Sous-titre du bloc Méthode. */
.h2-sub{display:block;margin-top:6px;font-weight:400;font-size:.6em;color:#9AA39C}