/* ============================================================
   Art & Facility — styles des composants (extraits du design system)
   Dans la maquette React ces styles étaient injectés par JS ; ici on
   les fige dans une feuille statique pour un site sans JS de rendu.
   ============================================================ */

/* —— Button —— */
.af-btn{
  --_bg: var(--service-500); --_bgh: var(--service-600); --_fg: var(--service-contrast);
  display:inline-flex;align-items:center;justify-content:center;gap:.55em;
  font-family:var(--font-body);font-weight:700;line-height:1;
  border:1px solid transparent;border-radius:var(--radius-pill);cursor:pointer;
  text-decoration:none;white-space:nowrap;
  transition:transform var(--dur-fast) var(--ease-out),
             background var(--dur) var(--ease-out),
             box-shadow var(--dur) var(--ease-out), color var(--dur) var(--ease-out);
}
.af-btn:focus-visible{outline:none;box-shadow:var(--ring)}
.af-btn:active{transform:translateY(0) scale(.975)}
.af-btn--sm{font-size:13.5px;padding:9px 16px}
.af-btn--md{font-size:15px;padding:13px 24px}
.af-btn--lg{font-size:16.5px;padding:16px 30px}
.af-btn--block{width:100%}
.af-btn--primary{background:var(--_bg);color:var(--_fg);box-shadow:var(--shadow-sm)}
.af-btn--primary:hover{background:var(--_bgh);transform:translateY(-2px);box-shadow:var(--shadow-md)}
.af-btn--secondary{background:#fff;color:var(--af-navy-700);border-color:var(--border-strong)}
.af-btn--secondary:hover{border-color:var(--af-navy-700);transform:translateY(-2px);box-shadow:var(--shadow-sm)}
.af-btn--ghost{background:transparent;color:var(--service-600);padding-inline:14px}
.af-btn--ghost:hover{background:var(--service-50);color:var(--service-700)}
.af-btn--ghost-light{background:rgba(255,255,255,.10);color:#fff;border-color:rgba(255,255,255,.45);backdrop-filter:blur(6px)}
.af-btn--ghost-light:hover{background:rgba(255,255,255,.20);border-color:#fff;transform:translateY(-2px)}
.af-btn--inverse{background:#fff;color:var(--af-navy-700)}
.af-btn--inverse:hover{background:var(--af-paper);transform:translateY(-2px);box-shadow:var(--shadow-md)}
.af-btn[disabled],.af-btn[aria-disabled="true"]{opacity:.45;pointer-events:none;box-shadow:none}
.af-btn svg{width:1.2em;height:1.2em;flex:none}

/* —— Input —— */
.af-field{display:flex;flex-direction:column;gap:7px;font-family:var(--font-body)}
.af-field__label{font-size:13.5px;font-weight:600;color:var(--af-navy-700)}
.af-field__req{color:var(--service-600)}
.af-input{
  font-family:var(--font-body);font-size:15.5px;color:var(--af-navy-700);
  background:#fff;border:1px solid var(--border-strong);border-radius:var(--radius-md);
  padding:13px 16px;width:100%;line-height:1.4;box-sizing:border-box;
  transition:border-color var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}
.af-input::placeholder{color:var(--text-faint)}
.af-input:hover{border-color:var(--af-gray-400)}
.af-input:focus{outline:none;border-color:var(--service-500);box-shadow:var(--ring)}
textarea.af-input{resize:vertical;min-height:120px}
.af-field__hint{font-size:12.5px;color:var(--text-muted)}

/* —— SectionHeading —— */
.af-sh{display:flex;flex-direction:column;gap:16px;max-width:680px}
.af-sh--center{align-items:center;text-align:center;margin-inline:auto}
.af-sh__title{font-family:var(--font-display);font-weight:700;color:var(--af-navy-700);
  font-size:clamp(28px,4vw,var(--fs-h2));line-height:var(--lh-heading);letter-spacing:var(--ls-tight);margin:0;text-wrap:balance}
.af-sh--ink .af-sh__title{color:#fff}
.af-sh__lead{font-size:var(--fs-lead);line-height:var(--lh-relaxed);color:var(--text-body);margin:0;text-wrap:pretty}
.af-sh--ink .af-sh__lead{color:var(--text-inverse-dim)}

/* —— PrestationItem —— */
.af-prest{display:flex;align-items:flex-start;gap:14px;font-family:var(--font-body)}
.af-prest__ic{width:44px;height:44px;flex:none;border-radius:var(--radius-md);
  display:flex;align-items:center;justify-content:center;
  background:var(--service-50);color:var(--service-600)}
.af-prest__ic svg{width:23px;height:23px}
.af-prest__body{display:flex;flex-direction:column;gap:2px;padding-top:2px}
.af-prest__title{font-weight:600;font-size:15.5px;color:var(--af-navy-700);line-height:1.35}
.af-prest__desc{font-size:13.5px;color:var(--text-muted);line-height:1.5}
.af-prest--row{align-items:center}

/* —— Badge —— */
.af-badge{display:inline-flex;align-items:center;gap:6px;font-family:var(--font-body);
  font-weight:700;font-size:12.5px;letter-spacing:.02em;line-height:1;
  padding:6px 12px;border-radius:var(--radius-pill);white-space:nowrap}
.af-badge svg{width:14px;height:14px}
.af-badge--soft{background:var(--service-50);color:var(--service-700)}
.af-badge--solid{background:var(--service-500);color:var(--service-contrast)}
.af-badge--outline{background:transparent;color:var(--service-700);box-shadow:inset 0 0 0 1.5px var(--service-300)}
.af-badge--ink{background:var(--af-navy-700);color:#fff}

/* —— Stat —— */
.af-stat{display:flex;flex-direction:column;gap:4px;font-family:var(--font-body)}
.af-stat__val{font-family:var(--font-display);font-weight:800;line-height:1;
  font-size:clamp(34px,4vw,48px);color:var(--service-600);letter-spacing:-.02em}
.af-stat--ink .af-stat__val{color:#fff}
.af-stat__label{font-size:14px;color:var(--text-muted);font-weight:500}
.af-stat--ink .af-stat__label{color:var(--text-inverse-dim)}
.af-stat__val sup{font-size:.5em;font-weight:700;vertical-align:super;margin-left:2px}

/* —— Eyebrow —— */
.af-eyebrow-c{
  font-family:var(--font-body);font-weight:700;font-size:var(--fs-eyebrow);
  letter-spacing:var(--ls-eyebrow);text-transform:uppercase;color:var(--service-600);
  display:inline-flex;align-items:center;gap:9px;
}
.af-eyebrow-c::before{content:"";width:22px;height:2px;border-radius:2px;background:var(--service-500)}
.af-eyebrow-c--plain::before{display:none}

/* ============================================================
   Ajouts propres au site statique
   ============================================================ */
/* décalage d'ancre sous le header collant */
#contact,#prestations{scroll-margin-top:96px}

/* séparateur « ou envoyez-nous un message » dans le bloc contact */
.af-contact__or{display:flex;align-items:center;gap:14px;margin:6px 0 2px;
  color:var(--text-muted);font-size:13px;font-weight:600}
.af-contact__or::before,.af-contact__or::after{content:"";height:1px;flex:1;background:var(--border-subtle)}

/* l'attribut [hidden] doit l'emporter sur display:grid de site.css */
.af-contact__gate[hidden],.af-contact__revealed[hidden]{display:none}

/* formulaire e-mail */
.af-contact__msgform{display:grid;gap:16px}
#afFormStatus{min-height:1em}
#afFormStatus.is-ok{color:var(--service-700);font-weight:600}
#afFormStatus.is-err{color:var(--af-warning,#b4690e);font-weight:600}