/* ═══════════════════════════════════════════
   style.css — L'Atelier (site-3)
═══════════════════════════════════════════ */
:root {
  --warm:      #FEFBF3;
  --paper:     #F5EDDF;
  --paper-d:   #E8D9C0;
  --ochre:     #C4753D;
  --ochre-l:   #D98B56;
  --forest:    #2E5C3A;
  --forest-l:  #3D7A4D;
  --ink:       #1C1510;
  --ink-m:     #5C4A3A;
  --ink-l:     #9C8B7A;
  --sepia:     #8B5E3C;
  --t:         0.25s ease;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { -webkit-font-smoothing: antialiased; }

::-webkit-scrollbar       { width: 5px; }
::-webkit-scrollbar-track { background: var(--warm); }
::-webkit-scrollbar-thumb { background: var(--ochre); border-radius: 3px; }
::selection               { background: var(--ochre); color: var(--warm); }
:focus-visible            { outline: 2px solid var(--ochre); outline-offset: 3px; border-radius: 2px; }

/* Navbar — always visible (sticky warm) */
#navbar { box-shadow: none; transition: box-shadow .3s ease; }
#navbar.scrolled { box-shadow: 0 2px 20px rgba(28,21,16,.07); }
.nav-link.active-link { color: var(--ochre) !important; }
#mobile-menu.is-open { display: block; }

/* Hero pattern */
.hero-paper-pattern {
  background-image: url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%238B5E3C' fill-opacity='.08' fill-rule='evenodd'%3E%3Cpath d='M0 40L40 0H20L0 20M40 40V20L20 40'/%3E%3C/g%3E%3C/svg%3E");
}

/* Buttons */
.btn-ochre {
  background: var(--ochre);
  color: var(--warm);
  border: 1.5px solid var(--ochre);
  transition: background var(--t), transform var(--t), box-shadow var(--t);
}
.btn-ochre:hover  { background: var(--ochre-l); border-color: var(--ochre-l); transform: translateY(-2px); box-shadow: 0 5px 20px rgba(196,117,61,.3); }
.btn-ochre:active { transform: translateY(0); }
.btn-ochre:disabled { opacity:.6; cursor:not-allowed; transform:none; }

.btn-forest {
  background: transparent;
  color: var(--forest);
  border: 1.5px solid var(--forest);
  transition: background var(--t), transform var(--t);
}
.btn-forest:hover { background: var(--forest); color: var(--warm); transform: translateY(-2px); }
.btn-forest:active { transform: translateY(0); }

/* Timeline (method) */
.timeline-step { padding: 1.5rem; }
@media (min-width: 1024px) {
  .timeline-step { padding: 0 1rem; }
}

/* Story card */
.story-warm-card {
  border: 1px solid var(--paper-d);
  background: var(--warm);
  overflow: hidden;
}
.context-warm {
  background: rgba(196,117,61,.06);
  border-left: 3px solid var(--ochre);
  border-radius: 0 .375rem .375rem 0;
}
.story-text p:first-child::first-letter {
  font-family: 'EB Garamond', Georgia, serif;
  font-size: 3.5rem;
  font-weight: 600;
  float: left;
  line-height: .8;
  margin-right: .08em;
  color: var(--ochre);
}

/* Form */
.warm-form-label {
  display: block;
  font-family: 'Lato', sans-serif;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-m);
  margin-bottom: .4rem;
}
.warm-form-input {
  display: block;
  width: 100%;
  padding: .8rem 1rem;
  background: var(--paper);
  border: 1.5px solid var(--paper-d);
  border-radius: .375rem;
  font-family: 'Lato', sans-serif;
  font-size: .9375rem;
  font-weight: 300;
  color: var(--ink);
  transition: border-color var(--t), box-shadow var(--t);
  appearance: none; -webkit-appearance: none;
}
.warm-form-input::placeholder { color: var(--ink-l); }
.warm-form-input:hover        { border-color: var(--sepia); }
.warm-form-input:focus        { outline: none; border-color: var(--ochre); box-shadow: 0 0 0 3px rgba(196,117,61,.1); }
.warm-form-input.is-invalid   { border-color: #dc2626; box-shadow: 0 0 0 3px rgba(220,38,38,.08); }
.warm-form-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%239C8B7A'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .875rem center;
  background-size: 1.125rem;
  padding-right: 2.5rem;
}

/* Reveal */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .75s cubic-bezier(.22,1,.36,1), transform .75s cubic-bezier(.22,1,.36,1); }
.reveal.visible { opacity: 1; transform: translateY(0); }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .btn-ochre:hover, .btn-forest:hover { transform: none; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}
@media print { #navbar, footer { display: none; } .reveal { opacity:1; transform:none; } }