/* ============================================================
   ATELIER PSY — Inner pages
   Loaded after atelier.css. Only the pieces the homepage
   does not need live here.
   ============================================================ */

/* The inner pages have no growing tree behind them, so they need their
   own atmosphere or the beige reads as flat. Two soft radial washes,
   fixed, so they drift against the content as you scroll. */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(1100px 620px at 82% -6%, rgba(240, 214, 138, .40), transparent 62%),
    radial-gradient(900px 560px at 8% 22%, rgba(163, 188, 152, .34), transparent 58%),
    radial-gradient(1000px 700px at 60% 104%, rgba(122, 148, 113, .26), transparent 60%);
}
main, .ap-footer { position: relative; z-index: 3; }

/* ============================================================
   SECTION HEAD PLATE (shared with the homepage values section)
   ============================================================ */

.ap-head-plate {
  padding: clamp(1.5rem, 3vw, 2.25rem) clamp(1.75rem, 4vw, 3rem);
  max-width: 700px;
}
.ap-head-plate h2 { margin-block-end: 0; }

/* ============================================================
   VALUES / DOMAINS GRID (shared shape with the homepage)
   ============================================================ */

.ap-val-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--ap-s-2); }
@media (max-width: 980px) { .ap-val-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .ap-val-grid { grid-template-columns: 1fr; } }

.ap-val {
  padding: clamp(1.4rem, 2.5vw, 2rem);
  background: rgba(255, 253, 249, .68);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, .55);
  border-radius: var(--ap-r-lg);
  box-shadow: var(--ap-e-2);
  transition: transform var(--ap-dur-slow) var(--ap-ease-out),
              background-color var(--ap-dur) linear;
}
.ap-val:hover { transform: translateY(-6px); background: rgba(255, 253, 249, .9); }
/* No zigzag offset here: these cards have uneven heights, so staggering
   them reads as misalignment rather than as rhythm. */

.ap-val-icon {
  width: 46px; height: 46px;
  display: grid; place-items: center;
  background: var(--ap-beige-deep);
  border-radius: 14px;
  margin-block-end: 1.1rem;
  color: var(--ap-leaf-deep);
}
.ap-val-icon svg { width: 22px; height: 22px; }
.ap-val h3 { font-size: 1.08rem; margin-block-end: .5rem; }
.ap-val p { font-size: .9rem; color: var(--ap-ink-soft); line-height: 1.6; }

/* ============================================================
   NUMBERED STEPS  (supervisions: how it works)
   ============================================================ */

.ap-steps { display: grid; gap: var(--ap-s-3); counter-reset: step; }
.ap-step {
  display: flex;
  align-items: flex-start;
  gap: var(--ap-s-3);
  padding-block: var(--ap-s-2);
}
.ap-step + .ap-step { border-block-start: 1px solid rgba(107, 86, 68, .13); }
.ap-step-num {
  flex: none;
  width: 54px; height: 54px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--ap-beige-deep);
  border: 1.5px solid rgba(122, 148, 113, .35);
  font-family: var(--ap-font-display);
  font-variation-settings: 'wdth' 84, 'wght' 800;
  font-size: 1.3rem;
  color: var(--ap-leaf-deep);
}
.ap-step h3 { font-size: 1.14rem; margin-block-end: .35rem; }
.ap-step p { font-size: .95rem; color: var(--ap-ink-soft); }

/* ============================================================
   APPROACH LIST  (about: four commitments)
   ============================================================ */

.ap-appr-list { display: grid; gap: var(--ap-s-2); }
.ap-appr {
  position: relative;
  padding: var(--ap-s-3) var(--ap-s-3) var(--ap-s-3) var(--ap-s-4);
  background: rgba(255, 253, 249, .55);
  border-radius: var(--ap-r-md);
  transition: background-color var(--ap-dur) linear, transform var(--ap-dur-slow) var(--ap-ease-out);
}
[dir='rtl'] .ap-appr { padding: var(--ap-s-3) var(--ap-s-4) var(--ap-s-3) var(--ap-s-3); }
.ap-appr::before {
  content: '';
  position: absolute;
  inset-block: var(--ap-s-3);
  inset-inline-start: 0;
  width: 3px;
  border-radius: 3px;
  background: linear-gradient(var(--ap-leaf), var(--ap-sun-deep));
}
.ap-appr:hover { background: rgba(255, 253, 249, .85); transform: translateX(4px); }
[dir='rtl'] .ap-appr:hover { transform: translateX(-4px); }
.ap-appr h3 { font-size: 1.1rem; margin-block-end: .35rem; }
.ap-appr p { font-size: .94rem; color: var(--ap-ink-soft); }

/* ============================================================
   FORMS
   ============================================================ */

.ap-form { display: grid; gap: var(--ap-s-3); align-content: start; }
.ap-form .ap-btn { justify-self: start; }
.ap-form .ap-btn-block { justify-self: stretch; }

.ap-req { color: var(--ap-sun-deep); }

.ap-err {
  font-size: .82rem;
  color: #A8443A;
  display: flex;
  align-items: center;
  gap: .35rem;
}
.ap-err::before { content: '⚠'; font-size: .9em; }

.ap-input[aria-invalid='true'],
.ap-textarea[aria-invalid='true'],
.ap-select[aria-invalid='true'] {
  border-color: #A8443A;
  box-shadow: 0 0 0 4px rgba(168, 68, 58, .12);
}

.ap-formnote {
  font-size: .84rem;
  color: var(--ap-ink-mute);
  padding: .85rem 1.1rem;
  background: rgba(240, 214, 138, .22);
  border-radius: var(--ap-r-md);
  border: 1px solid rgba(224, 185, 92, .35);
  max-width: none;
}

.ap-form-ok {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .9rem 1.2rem;
  background: rgba(122, 148, 113, .18);
  border: 1px solid rgba(79, 107, 74, .3);
  border-radius: var(--ap-r-md);
  color: var(--ap-forest);
  font-size: .94rem;
  max-width: none;
}
.ap-form-ok::before { content: '✓'; font-weight: 700; color: var(--ap-leaf-deep); }

/* ============================================================
   CONTACT PAGE
   ============================================================ */

.ap-contact-side { display: grid; gap: var(--ap-s-3); align-content: start; }

.ap-contact-card {
  display: grid;
  gap: var(--ap-s-2);
  padding: clamp(1.4rem, 3vw, 2rem);
  background: var(--ap-cream);
  border: 1px solid rgba(107, 86, 68, .12);
  border-radius: var(--ap-r-lg);
  box-shadow: var(--ap-e-2);
}
.ap-contact-row-dark { color: var(--ap-ink-soft); align-items: flex-start; }
.ap-contact-row-dark svg { color: var(--ap-leaf-deep); }
.ap-contact-row-dark strong { color: var(--ap-ink); font-weight: 600; }
.ap-contact-row + .ap-contact-row { margin-block-start: 0; }

.ap-contact-vig {
  width: 100%;
  border-radius: var(--ap-r-lg);
  box-shadow: var(--ap-e-2);
}

/* ============================================================
   BLOG
   ============================================================ */

.ap-post {
  display: flex;
  flex-direction: column;
  background: var(--ap-cream);
  border: 1px solid rgba(107, 86, 68, .1);
  border-radius: var(--ap-r-lg);
  overflow: hidden;
  box-shadow: var(--ap-e-2);
  transition: transform var(--ap-dur-slow) var(--ap-ease-out),
              box-shadow var(--ap-dur-slow) var(--ap-ease-out);
}
.ap-post:hover { transform: translateY(-7px); box-shadow: var(--ap-e-4); }
.ap-post-fig { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--ap-beige-deep); }
.ap-post-fig svg { width: 100%; height: 100%; }
.ap-post-fig::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(51, 71, 47, .26), transparent 55%);
}
.ap-post-body { display: flex; flex-direction: column; gap: .7rem; padding: clamp(1.3rem, 2.4vw, 1.8rem); flex: 1; }
.ap-post-tag {
  align-self: flex-start;
  font-family: var(--ap-font-display);
  font-variation-settings: 'wdth' 100, 'wght' 700;
  font-size: .66rem;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--ap-leaf-deep);
  padding: .3em .8em;
  background: rgba(122, 148, 113, .16);
  border-radius: var(--ap-r-pill);
}
.ap-post h3 { font-size: 1.2rem; line-height: 1.3; }
.ap-post p { font-size: var(--ap-t-small); color: var(--ap-ink-soft); }
.ap-post-soon {
  margin-block-start: auto;
  padding-block-start: .9rem;
  border-block-start: 1px solid rgba(107, 86, 68, .12);
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--ap-ink-mute);
}

.ap-blog-note {
  margin-block-start: var(--ap-s-4);
  padding: clamp(1.6rem, 4vw, 2.75rem);
  text-align: center;
  background: rgba(240, 214, 138, .2);
  border: 1px dashed rgba(224, 185, 92, .55);
  border-radius: var(--ap-r-lg);
}
.ap-blog-note h3 { margin-block-end: .6rem; }
.ap-blog-note p { margin: 0 auto 1.4rem; color: var(--ap-ink-soft); max-width: 52ch; }

/* ============================================================
   CART PAGE
   ============================================================ */

.ap-cart-layout {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}
@media (max-width: 900px) { .ap-cart-layout { grid-template-columns: 1fr; } }
/* With an empty basket the form is hidden, so the two-column grid would
   leave the empty state squeezed into the left half. */
.ap-cart-layout:has(.ap-checkout[hidden]) { grid-template-columns: 1fr; max-width: 620px; margin-inline: auto; }

.ap-checkout {
  padding: clamp(1.5rem, 3vw, 2.25rem);
  background: rgba(255, 253, 249, .7);
  border: 1px solid rgba(107, 86, 68, .12);
  border-radius: var(--ap-r-lg);
  box-shadow: var(--ap-e-2);
}

.ap-line {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: var(--ap-s-2);
  padding-block: var(--ap-s-2);
}
.ap-line + .ap-line { border-block-start: 1px solid rgba(107, 86, 68, .12); }
.ap-line-title { font-weight: 600; font-size: 1.02rem; line-height: 1.35; }
.ap-line-meta { font-size: .82rem; color: var(--ap-ink-mute); }
.ap-line-price {
  font-family: var(--ap-font-display);
  font-variation-settings: 'wdth' 84, 'wght' 700;
  font-size: 1.1rem;
  color: var(--ap-forest);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
@media (max-width: 560px) {
  .ap-line { grid-template-columns: 1fr auto; }
  .ap-line-price { grid-column: 2; }
}

/* ============================================================
   PAGE HEAD tweak — the label above the h1
   ============================================================ */

.ap-pagehead .ap-label { justify-content: center; }

@media print {
  body::before { display: none; }
}


/* ============================================================
   WHY BLOCK (about) — one real number, two reasons
   ============================================================ */

.ap-why-grid {
  display: grid;
  grid-template-columns: .8fr 1.2fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
@media (max-width: 820px) { .ap-why-grid { grid-template-columns: 1fr; } }

.ap-why-lead { text-align: center; }
.ap-why-lead .ap-stat-label { margin-block-start: .7rem; }
.ap-why-lead p {
  margin: .7rem auto 0;
  max-width: 30ch;
  font-size: .9rem;
  color: var(--ap-ink-soft);
}

.ap-why-list { display: grid; gap: var(--ap-s-2); }
.ap-why {
  display: flex;
  gap: var(--ap-s-2);
  align-items: flex-start;
  padding: var(--ap-s-3);
  background: rgba(255, 253, 249, .6);
  border: 1px solid rgba(255, 255, 255, .5);
  border-radius: var(--ap-r-lg);
  transition: transform var(--ap-dur-slow) var(--ap-ease-out),
              background-color var(--ap-dur) linear;
}
.ap-why:hover { transform: translateY(-4px); background: rgba(255, 253, 249, .88); }
.ap-why .ap-val-icon { margin-block-end: 0; flex: none; }
.ap-why h3 { font-size: 1.06rem; margin-block-end: .35rem; }
.ap-why p { font-size: .9rem; color: var(--ap-ink-soft); }

/* The checkout column is ~400px wide; the full h2 scale wraps "Vos
   coordonnées" onto two lines and dwarfs the fields beside it. */
.ap-checkout h2 { font-size: clamp(1.5rem, 2.4vw, 1.9rem); }

/* The selection page lists items with a reference fee, never a sum —
   see assets/js/selection.js for why. */
.ap-line { grid-template-columns: 1fr auto; }
.ap-line-ref {
  margin-block-start: .35rem;
  font-size: .78rem;
  color: var(--ap-ink-mute);
  font-variant-numeric: tabular-nums;
}