/* ArchStudio CI Pro — Système de design
   Palette : terre cuite d'Abidjan, vert palmeraie, sable de Grand-Bassam */

:root{
  --clay:        #C9622F;   /* terre cuite / latérite ivoirienne */
  --clay-dark:   #A84E22;
  --palm:        #1F7A4D;   /* vert palmeraie */
  --palm-dark:   #155C39;
  --sand:        #E9DFC9;   /* sable */
  --ink:         #16140F;   /* presque noir, chaud */
  --ink-soft:    #221F18;
  --ink-card:    #2A2620;
  --line:        #3A352B;
  --paper:       #F4EFE3;
}

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,560;9..144,680&family=Manrope:wght@400;500;600;700;800&display=swap');

.font-display{ font-family:'Fraunces', 'Space Grotesk', serif; font-optical-sizing:auto; }
.font-body{ font-family:'Manrope', 'Inter', sans-serif; }

body{ font-family:'Manrope', system-ui, sans-serif; background:var(--ink); }

/* Signature: woven "kita" border — a slim repeating chevron strip used as a
   structural divider, nodding to Ivorian textile pattern without literal imagery */
.kita-strip{
  height:6px;
  background-image: repeating-linear-gradient(135deg, var(--clay) 0 10px, var(--palm) 10px 20px);
  background-size: 28px 6px;
}

.bg-clay{ background-color:var(--clay); }
.bg-clay-dark{ background-color:var(--clay-dark); }
.bg-palm{ background-color:var(--palm); }
.text-clay{ color:var(--clay); }
.text-palm{ color:var(--palm); }
.border-clay{ border-color:var(--clay); }

.btn-primary{
  background: linear-gradient(135deg, var(--clay), var(--clay-dark));
  color:#fff; font-weight:600; border-radius:1rem;
  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
  box-shadow: 0 10px 30px -10px rgba(201,98,47,.55);
}
.btn-primary:hover{ filter:brightness(1.07); transform:translateY(-1px); }
.btn-primary:active{ transform:translateY(0) scale(.985); }

.btn-ghost{
  background:transparent; border:1px solid var(--line); color:#E9E4D6;
  border-radius:1rem; transition:all .15s ease;
}
.btn-ghost:hover{ background:var(--ink-card); border-color:var(--clay); }

.card{
  background:var(--ink-card);
  border:1px solid var(--line);
  border-radius:1.5rem;
}
.card-hover{ transition:transform .2s cubic-bezier(.4,0,.2,1), box-shadow .2s ease, border-color .2s ease; }
.card-hover:hover{ transform:translateY(-4px); border-color:var(--clay); box-shadow:0 24px 40px -16px rgba(0,0,0,.5); }

.input-field{
  background:var(--ink); border:1px solid var(--line); border-radius:1rem;
  color:#fff; transition:border-color .15s ease;
}
.input-field:focus{ outline:none; border-color:var(--clay); }

::selection{ background:var(--clay); color:#fff; }

.badge-ci{
  background:linear-gradient(90deg, rgba(201,98,47,.15), rgba(31,122,77,.15));
  border:1px solid var(--line);
  color:#E9E4D6;
}

/* scrollbar */
::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-track{ background:var(--ink); }
::-webkit-scrollbar-thumb{ background:var(--line); border-radius:8px; }
::-webkit-scrollbar-thumb:hover{ background:var(--clay); }

.fade-up{ animation:fadeUp .6s cubic-bezier(.2,.8,.2,1) both; }
@keyframes fadeUp{ from{ opacity:0; transform:translateY(14px); } to{ opacity:1; transform:none; } }

@media (prefers-reduced-motion: reduce){
  .fade-up, .card-hover{ animation:none !important; transition:none !important; }
}