/* =========================================================
   Fiki ApS — style.css
   Feuille de style commune à tout le site.
   Palette et typographie reprises de la page de déploiement
   (papier / encre / rouge), étendues pour un site complet.
   ========================================================= */

:root{
  --paper:#F2F0EA;
  --paper-2:#EAE7DE;
  --paper-3:#E3E0D6;
  --white:#FFFFFF;
  --ink:#1A1A18;
  --ink-dim:#5C5A52;
  --ink-faint:#9C998E;
  --red:#C8102E;
  --red-dark:#A50D26;
  --red-tint: rgba(200,16,46,0.08);
  --line: rgba(26,26,24,0.10);
  --line-strong: rgba(26,26,24,0.16);
  --serif: "Fraunces", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --sans: "Inter", "Helvetica Neue", Arial, sans-serif;

  --container: 1180px;
  --radius-s: 8px;
  --radius-m: 14px;
  --radius-l: 22px;
  --shadow-s: 0 1px 2px rgba(26,26,24,0.04), 0 1px 1px rgba(26,26,24,0.03);
  --shadow-m: 0 10px 30px rgba(26,26,24,0.07);
}

*, *::before, *::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; }

html, body{ margin:0; padding:0; }

body{
  min-height:100vh;
  display:flex;
  flex-direction:column;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing: antialiased;
  background-image:
    radial-gradient(900px 460px at 88% -8%, rgba(200,16,46,0.05), transparent 60%);
}

main{ flex:1; }

img{ max-width:100%; display:block; }

a{ color:inherit; text-decoration:none; }

h1, h2, h3, h4{
  font-family: var(--serif);
  font-weight:500;
  letter-spacing:-0.005em;
  margin:0 0 16px;
  color: var(--ink);
}

h1{ font-size: clamp(30px, 4.4vw, 46px); line-height:1.14; }
h2{ font-size: clamp(24px, 3.2vw, 32px); line-height:1.2; }
h3{ font-size: 20px; line-height:1.3; }

p{ margin:0 0 16px; color: var(--ink-dim); }

.container{
  width:100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 clamp(20px, 5vw, 64px);
}

.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:12.5px;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color: var(--red);
  font-weight:600;
  margin-bottom:14px;
}
.eyebrow::before{
  content:"";
  width:16px; height:1px;
  background: var(--red);
}

.lede{
  font-size:16px;
  line-height:1.65;
  color: var(--ink-dim);
  max-width:42ch;
}

/* ---------- boutons ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding: 13px 24px;
  border-radius:999px;
  font-family: var(--sans);
  font-size:14.5px;
  font-weight:600;
  letter-spacing:0.01em;
  cursor:pointer;
  border:1px solid transparent;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
  white-space:nowrap;
}
.btn:active{ transform: translateY(1px); }

.btn-primary{
  background: var(--red);
  color: var(--white);
}
.btn-primary:hover{ background: var(--red-dark); }

.btn-ghost{
  background: transparent;
  color: var(--ink);
  border-color: var(--line-strong);
}
.btn-ghost:hover{ border-color: var(--ink-faint); }

.btn-block{ width:100%; }

/* ---------- header ---------- */
.site-header{
  position:sticky;
  top:0;
  z-index:40;
  background: rgba(242,240,234,0.86);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom:1px solid var(--line);
}

.site-header .bar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 24px;
  padding: 18px clamp(20px, 5vw, 64px);
}

.brand{
  display:flex;
  align-items:center;
  gap:11px;
  flex-shrink:0;
}
.brand-mark {
  width: 70px;   /* Ajustez cette valeur selon vos besoins (ex: 40px ou 48px) */
  height: 70px;  /* Gardez la même valeur que width pour garder les proportions si le logo est carré */
  flex-shrink: 0;
}

.brand-mark img {
  width: 100%;
  height: 100%;
  object-fit: contain; /* Évite que l'image ne soit déformée */
  display: block;
}

.brand-name {
  font-family: var(--serif);
  font-size: 17px;
  color: var(--ink);
  white-space: nowrap;
}
.brand-name b{ font-weight:600; }
.brand-name span{ color: var(--ink-faint); font-weight:400; }

.nav-primary{
  display:flex;
  align-items:center;
  gap: 34px;
}
.nav-primary a{
  font-size:14.5px;
  color: var(--ink-dim);
  position:relative;
  padding: 4px 0;
  transition: color 0.2s ease;
}
.nav-primary a:hover{ color: var(--ink); }
.nav-primary a.active{ color: var(--ink); }
.nav-primary a.active::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:-3px;
  height:2px;
  background: var(--red);
  border-radius:2px;
}

.header-actions{
  display:flex;
  align-items:center;
  gap:18px;
  flex-shrink:0;
}

.nav-toggle{
  display:none;
  width:38px; height:38px;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  border:1px solid var(--line-strong);
  background:transparent;
  cursor:pointer;
  flex-shrink:0;
}
.nav-toggle svg{ width:18px; height:18px; }

/* menu mobile */
.nav-mobile{
  display:none;
  flex-direction:column;
  gap:2px;
  padding: 6px clamp(20px, 5vw, 64px) 22px;
  border-top:1px solid var(--line);
}
.nav-mobile a{
  padding:12px 0;
  font-size:15.5px;
  color: var(--ink-dim);
  border-bottom:1px solid var(--line);
}
.nav-mobile a.active{ color: var(--red); }
.nav-mobile .btn{ margin-top:14px; }

body.nav-open .nav-mobile{ display:flex; }

@media (max-width: 900px){
  .nav-primary{ display:none; }
  .header-actions .btn{ display:none; }
  .nav-toggle{ display:flex; }
}

/* ---------- footer ---------- */
.site-footer{
  border-top:1px solid var(--line);
  background: var(--paper-2);
}

.footer-grid{
  display:grid;
  grid-template-columns: 1.3fr 1fr 1fr 1fr;
  gap: 40px;
  padding: 56px clamp(20px, 5vw, 64px) 36px;
}

.footer-col h4{
  font-family: var(--sans);
  font-size:12.5px;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color: var(--ink-faint);
  font-weight:600;
  margin-bottom:18px;
}

.footer-brand{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:16px;
}
.footer-brand .brand-mark{ width:22px; height:22px; }
.footer-brand .brand-name{ font-size:16px; }

.footer-col address,
.footer-col p{
  font-style:normal;
  font-size:14px;
  line-height:1.7;
  color: var(--ink-dim);
  margin:0 0 8px;
}
.footer-col a{
  font-size:14px;
  color: var(--ink-dim);
  transition: color 0.2s ease;
}
.footer-col a:hover{ color: var(--red); }

.footer-list{
  list-style:none;
  margin:0; padding:0;
  display:flex;
  flex-direction:column;
  gap:11px;
}

.footer-bottom{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding: 20px clamp(20px, 5vw, 64px) 28px;
  border-top:1px solid var(--line);
  font-size:12.5px;
  color: var(--ink-faint);
}
.footer-bottom .fnote{ display:flex; gap:22px; flex-wrap:wrap; }
.footer-bottom .fnote span{ white-space:nowrap; }

@media (max-width: 900px){
  .footer-grid{
    grid-template-columns: 1fr 1fr;
    row-gap:36px;
  }
}
@media (max-width: 560px){
  .footer-grid{ grid-template-columns: 1fr; }
  .footer-bottom{ flex-direction:column; align-items:flex-start; }
}

/* ---------- utilitaires génériques réutilisables ---------- */
.section{ padding: 84px 0; }
.section-tight{ padding: 56px 0; }

.card{
  background: var(--white);
  border:1px solid var(--line);
  border-radius: var(--radius-m);
  box-shadow: var(--shadow-s);
}

.status-pill{
  display:flex;
  align-items:center;
  gap:9px;
  padding: 7px 14px 7px 11px;
  border:1px solid var(--line);
  border-radius:999px;
  font-size:12.5px;
  color: var(--ink-dim);
  white-space:nowrap;
  background: rgba(255,255,255,0.5);
}
.status-dot{
  width:7px; height:7px;
  border-radius:50%;
  background: var(--red);
  flex-shrink:0;
}

.skip-link{
  position:absolute;
  left:-9999px;
  top:auto;
  background: var(--ink);
  color:var(--white);
  padding:10px 16px;
  border-radius: var(--radius-s);
  z-index:100;
}
.skip-link:focus{
  left:20px;
  top:20px;
}

/* ---------- reveal (piloté par main.js) ---------- */
.reveal{
  opacity:0;
  transform: translateY(10px);
  transition: opacity 0.7s cubic-bezier(.16,.8,.24,1), transform 0.7s cubic-bezier(.16,.8,.24,1);
}
.reveal.is-visible{
  opacity:1;
  transform:none;
}
.site-header.reveal{ transition-delay: 0s; }

@media (prefers-reduced-motion: reduce){
  .reveal{
    opacity:1 !important;
    transform:none !important;
    transition:none !important;
  }
}