/* =============================================================================
   FileRelay — feuille de style partagee
   Charte Koesio :
     --koesio-primary  #6E398E  violet  -> liens, h1, h2, accents
     --koesio-accent   #EB5C6C  corail  -> titres secondaires (h3)

   Sections (dans l'ordre) :
     1. Variables / reset / base
     2. Layout commun (.wrap, footer, code.kbd)
     3. Specifique index.html (hero, card, download-card, features)
     4. Specifique manuel.html (topbar, toc, section.step, callout, figure.shot)
   ============================================================================= */


/* ----------------------------------------------------------------------------
   1. Variables / reset / base
   ---------------------------------------------------------------------------- */
:root {
  --koesio-primary:        #6E398E;
  --koesio-primary-dark:   #5A2E73;
  --koesio-accent:         #EB5C6C;
  --koesio-primary-tint:   #f4ecf7;   /* fond pale violet */
  --koesio-accent-tint:    #fdecee;   /* fond pale corail */
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

body {
  font-family: "Segoe UI", -apple-system, BlinkMacSystemFont, sans-serif;
  color: #1f2937;
  background: linear-gradient(180deg, #f8fafc 0%, var(--koesio-primary-tint) 100%);
  min-height: 100vh;
  line-height: 1.5;
}


/* ----------------------------------------------------------------------------
   2. Layout commun
   ---------------------------------------------------------------------------- */
.wrap {
  max-width: 760px;
  margin: 0 auto;
  padding: 48px 24px;
}

footer {
  text-align: center;
  padding: 32px 0 16px;
  color: #64748b;
  font-size: 0.88rem;
}
footer a {
  color: var(--koesio-primary);
  text-decoration: none;
}
footer a:hover { text-decoration: underline; }

code.kbd {
  background: #f1f5f9;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 0.88em;
  border: 1px solid #e2e8f0;
  font-family: Consolas, "Courier New", monospace;
}


/* ----------------------------------------------------------------------------
   3. Specifique index.html
   ---------------------------------------------------------------------------- */
.hero {
  text-align: center;
  padding: 32px 0 16px;
}
.hero img {
  width: 96px;
  height: 96px;
  image-rendering: -webkit-optimize-contrast;
}

h1 {
  font-size: 2.4rem;
  margin: 16px 0 8px;
  font-weight: 600;
  color: var(--koesio-primary);
}

.tagline {
  font-size: 1.1rem;
  color: #64748b;
  margin: 0 0 32px;
}

.card {
  background: white;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 28px 32px;
  margin-bottom: 20px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
.card h2 {
  font-size: 1.2rem;
  margin: 0 0 12px;
  color: var(--koesio-primary);
  font-weight: 600;
}
.card p { margin: 0 0 8px; }
.card p:last-child { margin-bottom: 0; }

.download-card {
  text-align: center;
  background: linear-gradient(135deg, var(--koesio-primary) 0%, var(--koesio-primary-dark) 100%);
  border: none;
  color: white;
}
.download-card h2 { color: white; }
.download-card p { color: #ece2f1; margin-bottom: 20px; }

.btn-download {
  display: inline-block;
  padding: 14px 32px;
  background: white;
  color: var(--koesio-primary);
  text-decoration: none;
  font-weight: 600;
  font-size: 1rem;
  border-radius: 8px;
  transition: transform 0.1s ease;
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}
.btn-download:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 12px rgba(0,0,0,0.15);
}

.btn-secondary {
  display: inline-block;
  padding: 12px 24px;
  margin-left: 8px;
  background: rgba(255,255,255,0.15);
  color: white;
  text-decoration: none;
  font-weight: 500;
  font-size: 0.95rem;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.3);
  transition: background 0.1s ease;
}
.btn-secondary:hover { background: rgba(255,255,255,0.25); }

.features {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.feature {
  background: white;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 20px 22px;
}
.feature h3 {
  font-size: 1rem;
  margin: 0 0 8px;
  color: var(--koesio-accent);
  font-weight: 600;
}
.feature p {
  margin: 0;
  font-size: 0.92rem;
  color: #475569;
}


/* ----------------------------------------------------------------------------
   4. Specifique manuel.html
   ---------------------------------------------------------------------------- */

/* La page manuel utilise un .wrap plus large et une top-bar */
body.manuel .wrap { max-width: 820px; padding: 40px 24px 64px; }
body.manuel { line-height: 1.6; }

.topbar {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 32px;
  flex-wrap: wrap;
}
.topbar a.back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background: white;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  color: var(--koesio-primary);
  text-decoration: none;
  font-weight: 500;
  font-size: 0.92rem;
}
.topbar a.back:hover { background: var(--koesio-primary-tint); }
.topbar img.logo { width: 32px; height: 32px; }
.topbar h1 {
  font-size: 1.6rem;
  margin: 0;
  color: var(--koesio-primary);
  font-weight: 600;
}

.toc {
  background: white;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 16px 24px;
  margin-bottom: 32px;
  font-size: 0.95rem;
}
.toc strong {
  display: block;
  color: var(--koesio-primary);
  margin-bottom: 8px;
  font-weight: 600;
}
.toc ol { margin: 0; padding-left: 22px; }
.toc li { margin: 4px 0; }
.toc a { color: var(--koesio-primary); text-decoration: none; }
.toc a:hover { text-decoration: underline; }

section.step {
  background: white;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 28px 32px;
  margin-bottom: 24px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
  scroll-margin-top: 16px;
}
section.step h2 {
  font-size: 1.3rem;
  color: var(--koesio-primary);
  margin: 0 0 16px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 12px;
}
section.step h3 {
  color: var(--koesio-accent);
  font-weight: 600;
}
section.step p { margin: 0 0 12px; }
section.step ol, section.step ul { padding-left: 22px; margin: 8px 0 12px; }
section.step li { margin: 6px 0; }
section.step strong { color: #0f172a; }

.step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: var(--koesio-primary);
  color: white;
  border-radius: 50%;
  font-size: 0.95rem;
  font-weight: 600;
  flex-shrink: 0;
}

figure.shot {
  margin: 16px 0;
  text-align: center;
}
figure.shot img {
  max-width: 100%;
  height: auto;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.06);
}
figure.shot figcaption {
  font-size: 0.85rem;
  color: #64748b;
  margin-top: 8px;
  font-style: italic;
}

.callout {
  border-left: 4px solid var(--koesio-primary);
  background: var(--koesio-primary-tint);
  padding: 12px 16px;
  border-radius: 0 8px 8px 0;
  margin: 16px 0;
  font-size: 0.95rem;
}
.callout.warning {
  border-left-color: var(--koesio-accent);
  background: var(--koesio-accent-tint);
}
.callout strong { color: #0f172a; }


/* ----------------------------------------------------------------------------
   Responsive (mobile)
   ---------------------------------------------------------------------------- */
@media (max-width: 600px) {
  .features { grid-template-columns: 1fr; }
  h1 { font-size: 1.8rem; }
  .btn-secondary { display: block; margin: 12px auto 0; max-width: 240px; }
}