/* Ebanda & Valcourt — feuille complémentaire « form » : chargée seulement par les pages concernées. */
@layer reset, tokens, base, layout, components, utilities, pages;

@layer layout {
  .grid-2 { display: grid; gap: 0 var(--gap); }
  @media (min-width: 40em) { .grid-2 { grid-template-columns: 1fr 1fr; } }
}

@layer components {
  .figphoto--side { margin-top: var(--space-5); }
  .field__help { font-size: var(--fs-small); color: var(--color-pierre); margin-top: var(--space-2); }
  .field__count { font-size: var(--fs-small); color: var(--color-pierre); text-align: right; margin-top: .25rem; font-variant-numeric: tabular-nums; }
  .choices--cards { gap: var(--space-3); }
  @media (min-width: 40em) { .choices--cards { grid-template-columns: repeat(2, 1fr); } }
  @media (min-width: 64em) { .choices--cards { grid-template-columns: repeat(3, 1fr); } }
  .choice__ico { color: var(--color-marine); width: 1.5rem; height: 1.5rem; }
  .choices--cards .choice { min-height: 64px; }
  .choice--inline { margin-top: var(--space-4); }
  .cform { scroll-margin-top: calc(var(--hdr) + 1rem); }
  .cdone { scroll-margin-top: calc(var(--hdr) + 1rem); }
  .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
  .consents { margin-top: var(--space-5); padding-top: var(--space-5); border-top: 1px solid var(--color-filet); }
  .alert { display: flex; gap: .75rem; padding: var(--space-4) var(--space-5); border: 1px solid var(--color-bordeaux); background: #f8f1ea; margin: 0 0 var(--space-5); }
  .alert__tels { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; margin-top: .5rem; font-weight: 600; }
  .cform { display: block; }
  .cform__banner { padding: var(--space-4) var(--space-5); background: var(--color-velin); border-left: 3px solid var(--color-or); margin-bottom: var(--space-5); display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-5); align-items: center; justify-content: space-between; font-size: .9375rem; }
  .cform__banner--ok { border-left-color: var(--color-succes); background: #eaf2ec; }
  .cform__banner-actions { display: flex; gap: .5rem; flex-wrap: wrap; }
  .cform__progress { margin-bottom: var(--space-6); }
  .stepper { list-style: none; padding: 0; display: flex; gap: .25rem; flex-wrap: wrap; font-size: .8125rem; margin-bottom: var(--space-3); }
  .stepper li { display: flex; align-items: center; }
  .stepper button, .stepper span.st-i { display: inline-flex; align-items: center; gap: .45rem; min-height: 44px; padding: 0 .55rem; background: none; border: 0; color: var(--color-pierre); border-radius: var(--radius); }
  .stepper .st-n { display: inline-grid; place-items: center; width: 1.6rem; height: 1.6rem; border: 1px solid currentColor; border-radius: 50%; font-weight: 700; font-size: .75rem; font-variant-numeric: tabular-nums; }
  .stepper button { color: var(--color-marine); cursor: pointer; }
  .stepper button:hover { background: var(--color-velin); }
  .stepper button .st-n { background: var(--color-marine); color: var(--color-ivoire); border-color: var(--color-marine); }
  .stepper [aria-current="step"] { color: var(--color-marine); font-weight: 700; }
  .stepper [aria-current="step"] .st-n { background: var(--color-or); border-color: var(--color-or); color: var(--color-marine); }
  .stepper .st-t { display: none; }
  .stepper [aria-current="step"] .st-t { display: inline; }
  .segbar { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; height: 4px; }
  .segbar i { background: var(--color-filet); transition: background-color var(--dur-3); }
  .segbar i.on { background: var(--color-marine); }
  .segbar i.cur { background: var(--color-or); }
  @media (min-width: 64em) { .stepper .st-t { display: inline; } .stepper { gap: .5rem; } }
  .step__title { float: left; width: 100%; font-family: var(--font-serif); font-size: clamp(1.4rem, 1.2rem + 1vw, 1.9rem); line-height: 1.2; color: var(--color-marine); margin-bottom: var(--space-5); padding: 0; outline-offset: 6px; }
  .step__title + * { clear: both; }
  .errsum { border: 1px solid var(--color-erreur); border-left-width: 4px; background: #fbefee; padding: var(--space-4) var(--space-5); margin-bottom: var(--space-5); }
  .errsum h3 { color: var(--color-erreur); font-size: 1rem; margin-bottom: var(--space-2); }
  .errsum ul { list-style: none; padding: 0; display: grid; gap: .25rem; }
  .errsum a { color: var(--color-erreur); font-weight: 600; }
  .cform__nav { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-6); padding-top: var(--space-5); border-top: 1px solid var(--color-filet); }
  .cform__nav .btn[data-js="next"], .cform__nav .btn[type="submit"] { margin-left: auto; }
  .cform__nav .btn[hidden] { display: none; }
  .slots__row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); align-items: stretch; }
  .slots__day { grid-column: 1 / -1; font-weight: 600; color: var(--color-marine); font-size: .9375rem; margin-top: var(--space-2); }
  .slots__loc { display: block; font-size: .75rem; color: var(--color-pierre); font-weight: 400; margin-top: .15rem; }
  @media (min-width: 48em) { .slots__row { grid-template-columns: 11rem 1fr 1fr; } .slots__day { grid-column: auto; margin-top: 0; align-self: center; } }
  .slots__note { font-size: var(--fs-small); color: var(--color-pierre); min-height: 1.4em; margin-top: var(--space-2); }
  .recap__blk { border: 1px solid var(--color-filet); background: var(--color-carte); padding: var(--space-4) var(--space-5); }
  .recap__h { display: flex; justify-content: space-between; gap: var(--space-3); align-items: center; margin-bottom: var(--space-3); }
  .recap__h h3 { font-size: 1rem; }
  .cdone { padding: var(--space-6); border: 1px solid var(--color-marine); border-top: 3px double var(--color-or); background: var(--color-carte); }
  .cdone:focus { outline: none; }
  .cdone__t { margin-top: var(--space-3); font-size: clamp(1.8rem, 1.4rem + 1.6vw, 2.6rem); }
  .cdone__ref { margin-top: var(--space-3); font-size: 1.1rem; }
  .cdone__ref strong { font-family: var(--font-serif); font-size: 1.5rem; font-weight: 400; letter-spacing: .04em; color: var(--color-bordeaux); }
  .cdone .recap { margin-top: var(--space-5); }
  .cdone__h { margin: var(--space-6) 0 var(--space-3); }
  .steps-list { padding-left: 1.4rem; display: grid; gap: .4rem; }
  .cdone__actions { margin-top: var(--space-6); display: flex; flex-wrap: wrap; gap: var(--space-3); }
  .guars { list-style: none; padding: 0; display: grid; gap: var(--space-3); margin-top: var(--space-6); }
  .guars li { display: flex; gap: .6rem; align-items: center; font-weight: 600; font-size: .9375rem; color: var(--color-marine); }
  .guars .ico { color: var(--color-or-profond); }
  @media (min-width: 48em) { .guars { grid-template-columns: repeat(3, auto); justify-content: start; gap: var(--space-3) var(--space-7); } }
  .contact-layout { display: grid; gap: var(--space-7) var(--gap); align-items: start; }
  @media (min-width: 64em) { .contact-layout { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); } .contact-side { position: sticky; top: calc(var(--hdr) + 1.5rem); } }
  .contact-main .callout__t { font-size: 1rem; }
  .office-side { padding: var(--space-5); background: var(--color-carte); border: 1px solid var(--color-filet); margin-bottom: var(--space-4); display: grid; gap: var(--space-2); font-size: var(--fs-small); }
  .office-side h3 { font-family: var(--font-serif); font-weight: 400; font-size: 1.4rem; }
  .side-box { padding: var(--space-5); background: var(--color-velin); margin-bottom: var(--space-4); }
  .side-box h3 { font-size: 1rem; margin-bottom: var(--space-3); display: flex; gap: .5rem; align-items: center; }
  .side-box__n { font-size: .8125rem; color: var(--color-pierre); margin-top: var(--space-3); }
  .side-box--urgent { background: #f8f1ea; border-left: 3px solid var(--color-bordeaux); font-size: .9375rem; }
  .side-box--urgent .ico { color: var(--color-bordeaux); }
  .plans { display: grid; gap: var(--space-5); }
  @media (min-width: 48em) { .plans { grid-template-columns: 1fr 1fr; } }
}