/* LA VITRINE, EN UNE SEULE FEUILLE (systeme « Ma », 23/09/2026).

   kb-fudoshin:entreprise/brand-book/systeme-de-design.md en est la source :
   le papier, l'encre, le vert qui ne varie jamais, Lora pour ce qui se lit
   comme un livre, Plex pour ce qui se manipule, une base de 4 px, des filets
   au lieu des ombres, et le vide qui donne du poids a ce qui reste.

   Pourquoi une feuille a part : l'accueil et Hubaki portaient chacun la meme
   charpente recopiee a la main, deja divergente. Une copie, c'est une
   occasion de deriver sans que personne le voie. Les pages ne gardent en
   ligne que ce qui leur est propre.

   Pas d'accent ni de couleur en dur hors des jetons : une couleur ecrite dans
   une regle ne sait pas faire nuit. */

@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:400;font-display:swap;
  src:url('/static/fonts/IBMPlexSans-Regular.woff2') format('woff2');}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:600;font-display:swap;
  src:url('/static/fonts/IBMPlexSans-SemiBold.woff2') format('woff2');}
@font-face{font-family:'Lora';font-style:normal;font-weight:400;font-display:swap;
  src:url('/static/fonts/Lora-Regular.woff2') format('woff2');}
@font-face{font-family:'Lora';font-style:italic;font-weight:400;font-display:swap;
  src:url('/static/fonts/Lora-Italic.woff2') format('woff2');}

:root{color-scheme:light dark;--papier:#FAFAF7;--encre:#111111;--gris:#545454;
  --gris-clair:#A8A8A8;--vert:#0B5C14;--filet-gris:#E5E4DE;--surface:#FFFFFF;
  --voile-vert:rgba(11,92,20,.06);--trait:rgba(17,17,17,.24);
  --nuit-fond:#111111;--nuit-texte:#FAFAF7;
  /* La plaque d'un logo qui ne sait pas faire nuit (Hubaki est noir) : papier, jour et nuit. */
  --plaque:#FAFAF7;
  --titre:'Lora','Iowan Old Style',Georgia,serif;
  --texte:'IBM Plex Sans',-apple-system,'Segoe UI',Roboto,sans-serif;
  --mincho:'Hiragino Mincho ProN','Yu Mincho','Noto Serif CJK JP','Noto Serif JP',serif;
  --courbe:cubic-bezier(.2,.6,.2,1);--large:1120px;--gouttiere:clamp(20px,4vw,40px);}
@media (prefers-color-scheme:dark){
  :root{--papier:#111111;--encre:#FAFAF7;--gris:#CCCCCC;--gris-clair:#A8A8A8;
    --vert:#5AAF63;--filet-gris:#545454;--surface:#000000;
    --voile-vert:rgba(90,175,99,.12);--trait:rgba(250,250,247,.28);
    --nuit-fond:#000000;--nuit-texte:#FAFAF7;--plaque:#FAFAF7;}
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{margin:0;background:var(--papier);color:var(--encre);font-family:var(--texte);
  font-size:1.0625rem;line-height:1.65;-webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;}
a{color:var(--vert);text-underline-offset:.18em;text-decoration-thickness:1px;}
img{max-width:100%;}
[hidden]{display:none!important;}
:focus-visible{outline:2px solid var(--vert);outline-offset:3px;}
.evitement{position:absolute;left:-9999px;top:0;}
.evitement:focus{left:16px;top:16px;z-index:20;padding:8px 12px;background:var(--surface);
  border:1px solid var(--vert);border-radius:2px;}

/* ── LA TETE : le lotus, le nom, trois mots, et la porte ─────────────────── */
.tete{position:relative;z-index:3;display:flex;align-items:center;gap:24px;
  max-width:var(--large);margin:0 auto;padding:18px var(--gouttiere);}
.marque{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--encre);}
.marque img{height:28px;width:auto;display:block;}
.marque span{font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--gris);}
.navigation{display:flex;align-items:center;gap:28px;margin-left:auto;font-size:15px;}
.navigation a{color:var(--gris);text-decoration:none;}
.navigation a:hover{color:var(--encre);}
/* « Entrer au dojo », le seul chemin vers app. depuis la vitrine : discret,
   lisible, et a la taille d'un pouce. */
.fud-connexion{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;
  font-size:13px;letter-spacing:.02em;color:var(--encre);text-decoration:none;
  background:var(--papier);border:1px solid var(--trait);border-radius:2px;
  transition:border-color .24s var(--courbe);}
.fud-connexion:hover,.fud-connexion:focus-visible{border-color:var(--encre);}
@media (max-width:760px){.navigation{display:none;}.tete>.fud-connexion{margin-left:auto;}}
@media (max-width:420px){.marque span{display:none;}}

.progression{position:fixed;top:0;left:0;height:2px;width:100%;z-index:5;background:var(--vert);
  transform-origin:0 50%;transform:scaleX(0);}
main{position:relative;z-index:1;display:block;}
footer{position:relative;z-index:1;}

/* ── LES BLOCS : une section, du vide autour, un filet entre deux ──────── */
.bloc{width:100%;max-width:var(--large);margin:0 auto;padding:clamp(64px,11vh,120px) var(--gouttiere);}
.bloc+.bloc{border-top:1px solid var(--filet-gris);}
.colonne{display:flex;flex-direction:column;gap:20px;}
/* L'asymetrie calme : le titre a gauche sur quatre colonnes, le propos a
   droite sur sept, la douzieme reste vide. */
.deux-temps{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:24px clamp(32px,6vw,96px);
  align-items:start;}
@media (max-width:860px){.deux-temps{grid-template-columns:minmax(0,1fr);}}

/* ── LES MOTS ──────────────────────────────────────────────────────────── */
.sur-titre{display:flex;align-items:center;gap:12px;margin:0;font-size:12px;font-weight:400;
  letter-spacing:.16em;text-transform:uppercase;color:var(--gris);}
.sur-titre::before{content:"";flex:none;width:24px;height:1px;background:var(--vert);}
h1,h2{margin:0;font-family:var(--titre);font-weight:400;text-wrap:balance;}
h1{font-size:clamp(40px,6.2vw,76px);line-height:1.04;letter-spacing:-.02em;}
h2{font-size:clamp(30px,3.6vw,46px);line-height:1.12;letter-spacing:-.015em;}
h3{margin:0;font-size:17px;font-weight:600;line-height:1.35;}
.ligne{display:block;}
.dit{margin:0;max-width:44ch;font-size:clamp(19px,1.9vw,23px);line-height:1.45;color:var(--encre);}
.detail{margin:0;max-width:62ch;font-size:16px;line-height:1.7;color:var(--gris);}
.accent{color:var(--vert);}

/* ── LES ACTIONS : l'encre pleine pour celle que la page attend, un filet
   pour les autres. Le vert reste un fil, il ne remplit jamais. ─────────── */
.actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px 26px;margin-top:8px;}
.bouton{display:inline-flex;align-items:center;justify-content:center;min-height:48px;
  padding:12px 26px;font-size:16px;font-weight:600;letter-spacing:.01em;text-decoration:none;
  color:var(--papier);background:var(--encre);border:1px solid var(--encre);border-radius:2px;
  transition:opacity .24s var(--courbe);}
.bouton:hover{opacity:.86;}
.lien{font-size:16px;color:var(--encre);text-decoration:none;
  border-bottom:1px solid var(--trait);padding-bottom:2px;transition:border-color .24s var(--courbe);}
.lien:hover{border-bottom-color:var(--encre);}
.lien::after{content:" \2192";}

/* ── LES CARTES : une feuille posee sur le papier, un sujet par carte ──── */
.carte{display:flex;flex-direction:column;gap:14px;padding:clamp(28px,3vw,40px);
  background:var(--surface);border:1px solid var(--filet-gris);border-radius:4px;min-width:0;}
.carte .genre{display:flex;align-items:center;gap:10px;font-size:12px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--gris);}
.carte>b{font-size:21px;font-weight:600;line-height:1.3;letter-spacing:-.005em;}
.carte p b{font-weight:600;}
.carte h3{margin:6px 0 0;font-size:12px;font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;color:var(--gris);}
.carte p{margin:0;}
.carte .pourqui{font-size:16px;line-height:1.6;color:var(--gris);}
.carte .reponse{font-size:16px;line-height:1.6;color:var(--encre);}
.carte .pousse{flex:1 1 auto;}
.carte .sortie{margin-top:8px;}

/* ── LA NUIT : une bande d'encre, pour ce qui vaut pour tout ─────────── */
/* De nuit, la bande reste la plus sombre de la page : elle ne s'allume pas. */
.nuit{background:var(--nuit-fond);color:var(--nuit-texte);}
.nuit .sur-titre{color:var(--nuit-texte);}
.nuit .sur-titre::before{background:var(--nuit-texte);}
.nuit .detail{color:var(--nuit-texte);opacity:.82;}
.constat{margin:0;display:flex;flex-direction:column;gap:6px;}
.constat p{margin:0;font-family:var(--titre);font-size:clamp(28px,3.6vw,44px);line-height:1.2;
  letter-spacing:-.015em;}
.constat p:first-child{opacity:.62;}

/* ── LES LISTES A FILETS ───────────────────────────────────────────────── */
.inclus{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:0 32px;margin:12px 0 0;}
.inclus>div{display:flex;flex-direction:column;gap:6px;padding:22px 0;border-top:1px solid var(--filet-gris);}
.inclus b{font-size:17px;font-weight:600;}
.inclus span{font-size:15.5px;line-height:1.6;color:var(--gris);}
.adresse{font-weight:600;color:var(--encre);white-space:nowrap;}

/* ── L'APPEL, au bout de la page ───────────────────────────────────────── */
#nous-ecrire{align-items:flex-start;}
#nous-ecrire h2{max-width:18ch;}
.filet{width:26px;height:2px;background:var(--vert);margin:16px 0 0;}

/* ── LE PIED ───────────────────────────────────────────────────────────── */
footer .pied{max-width:var(--large);margin:0 auto;padding:32px var(--gouttiere) 48px;
  font-size:14px;line-height:1.9;border-top:1px solid var(--filet-gris);}
footer p{margin:0;color:var(--gris);}
footer p+p{margin-top:12px;}
footer a{color:var(--encre);text-decoration:none;border-bottom:1px solid var(--trait);}
footer a:hover{border-bottom-color:var(--encre);}
footer .fud-porte{white-space:nowrap;}

/* ── LE MOUVEMENT : lent, court, et seulement si le navigateur sait le faire */
@keyframes fud-rise{from{opacity:0;transform:translateY(12px);}to{opacity:1;transform:none;}}
@keyframes fud-grow{from{transform:scaleX(0);}to{transform:scaleX(1);}}
@supports (animation-timeline: view()){
  .progression{animation:fud-grow linear both;animation-timeline:scroll(root);}
  .vu{animation:fud-rise .8s var(--courbe) both;animation-timeline:view();
    animation-range:entry 4% cover 24%;}
}
@media (prefers-reduced-motion: reduce){
  body *{animation:none!important;transition:none!important;}
  .progression{display:none;}
}