/* ============================================================================
   Webinar Kokoro x Vivactis Switzerland — 7 octobre 2026
   Feuille autonome : tokens DA 2026 + polices auto-hebergees + etats
   d'interaction. Rien a installer, rien d'externe : la page se rend a
   l'identique hors ligne et sur le serveur Infomaniak.
   ========================================================================= */

/* ── Polices (OFL 1.1, licences dans fonts/) ───────────────────────────── */
@font-face{font-family:"Sen";src:url("/vivactis-webinar/fonts/Sen-Medium.ttf") format("truetype");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Sen";src:url("/vivactis-webinar/fonts/Sen-SemiBold.ttf") format("truetype");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Young Serif";src:url("/vivactis-webinar/fonts/YoungSerif-Regular.ttf") format("truetype");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Zalando Sans";src:url("/vivactis-webinar/fonts/ZalandoSans-Light.ttf") format("truetype");font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:"Zalando Sans";src:url("/vivactis-webinar/fonts/ZalandoSans-Regular.ttf") format("truetype");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Zalando Sans";src:url("/vivactis-webinar/fonts/ZalandoSans-SemiBold.ttf") format("truetype");font-weight:600;font-style:normal;font-display:swap}

/* ── Tokens utilises par la page ───────────────────────────────────────── */
:root{
  --kokoro-black:#000000;
  --kokoro-white:#FFFFFF;
  --kokoro-soft-canvas:#EDEADD;
  --kokoro-blue:#2782FF;
  --kokoro-link:#1F66C9;

  --font-display:"Sen",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --font-editorial:"Young Serif",ui-serif,Georgia,"Times New Roman",serif;
  --font-body:"Zalando Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;

  --field-border:#D9D6C9;
}

/* ── Base ──────────────────────────────────────────────────────────────── */
*{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--kokoro-soft-canvas)}
a{color:var(--kokoro-black);text-decoration:none}
a:hover{color:var(--kokoro-black);text-decoration:underline}
img{max-width:100%}
input,select{font:inherit}
input::placeholder{color:#8C8A80}

/* Le lockup est un SVG en currentColor : il suit la couleur du conteneur. */
.kk-lockup{display:block;flex-shrink:0;color:var(--kokoro-black)}

/* ── Etats d'interaction (etaient des attributs du canvas de design) ───── */
.kk-cta-dark{transition:background-color 140ms linear}
.kk-cta-dark:hover{background:var(--kokoro-blue);text-decoration:none}

.kk-cta-blue{transition:background-color 140ms linear,color 140ms linear}
.kk-cta-blue:hover{background:var(--kokoro-white);color:var(--kokoro-black);text-decoration:none}

.kk-field:focus{border-color:var(--kokoro-blue);background:var(--kokoro-white)}

.kk-submit{transition:background-color 140ms linear}
.kk-submit:hover{background:var(--kokoro-black)}

/* Anneau de focus clavier visible sur tous les elements actionnables. */
a:focus-visible,button:focus-visible,input:focus-visible{
  outline:2px solid var(--kokoro-blue);outline-offset:3px
}

/* ── Empilement mobile ─────────────────────────────────────────────────────
   Le canvas de design n'etait compose que pour le desktop : sans ces deux
   regles, le hero et le bas de page restent sur deux colonnes a 390 px de
   large et la page deborde. Le rendu desktop n'est pas touche. ─────────── */
@media (max-width:900px){
  .kk-hero{grid-template-columns:minmax(0,1fr) !important}
  .kk-split{grid-template-columns:minmax(0,1fr) !important}
}
@media (max-width:640px){
  .kk-hero-title{white-space:normal !important}
  .kk-meta{width:100%;box-sizing:border-box}
  .kk-meta-rule{display:none}
  /* La mascotte rejoint le flux sous le texte : en absolu elle recouvrait la
     derniere ligne sur un ecran de telephone. */
  .kk-mascot-corner{
    position:static !important;width:128px !important;
    display:block;margin:24px -8px -10px auto
  }
}