/* ═══════════════════════════════════════════════════════════════
   COMPONENTS.CSS — Système de composants
═══════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────
   EYEBROW / ANNOTATION (langage "planche technique")
───────────────────────────────────────────── */
.eyebrow{
  display:inline-flex;align-items:center;gap:.6rem;
  font-family:var(--ff-mono);
  font-size:var(--fs-note);
  font-weight:500;
  letter-spacing:var(--tr-wide);
  text-transform:uppercase;
  color:var(--text-3);
}
.eyebrow::before{
  content:'';width:18px;height:1px;background:var(--brand);flex-shrink:0;
}
.eyebrow--plain::before{display:none}

.annot{
  font-family:var(--ff-mono);
  font-size:var(--fs-note);
  letter-spacing:var(--tr-mono);
  color:var(--text-3);
}

/* ─────────────────────────────────────────────
   BOUTONS
───────────────────────────────────────────── */
.btn{
  --btn-py:.85rem; --btn-px:1.45rem;
  display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  padding:var(--btn-py) var(--btn-px);
  border-radius:var(--r-sm);
  border:1px solid transparent;
  font-family:var(--ff-body);
  font-size:var(--fs-sm);
  font-weight:600;
  letter-spacing:-.005em;
  line-height:1;
  white-space:nowrap;
  cursor:pointer;
  transition:background var(--t-base) var(--ease-soft),
             border-color var(--t-base) var(--ease-soft),
             color var(--t-base) var(--ease-soft),
             box-shadow var(--t-base) var(--ease-soft),
             transform var(--t-fast) var(--ease-soft);
}
.btn svg{flex-shrink:0;transition:transform var(--t-base) var(--ease)}
.btn:hover svg.arw{transform:translateX(3px)}
.btn:active{transform:translateY(1px)}
.btn[disabled],.btn:disabled{opacity:.45;cursor:not-allowed;transform:none;box-shadow:none}

.btn--primary{background:var(--brand);color:var(--brand-ink);box-shadow:var(--sh-hair)}
.btn--primary:hover{background:var(--brand-hover);box-shadow:var(--sh-brand)}

.btn--secondary{background:transparent;color:var(--text);border-color:var(--border-strong)}
.btn--secondary:hover{border-color:var(--text);background:var(--surface)}
[data-theme="dark"] .btn--secondary:hover{background:var(--surface-2)}

.btn--ghost{background:transparent;color:var(--text-2);padding-inline:.4rem}
.btn--ghost:hover{color:var(--brand)}

.btn--sm{--btn-py:.6rem;--btn-px:1.05rem;font-size:var(--fs-cap)}
.btn--lg{--btn-py:1.05rem;--btn-px:1.9rem;font-size:var(--fs-base)}
.btn--block{width:100%}

/* Lien texte avec soulignement animé */
.link{
  display:inline-flex;align-items:center;gap:.4rem;
  font-size:var(--fs-sm);font-weight:600;color:var(--text);
  position:relative;padding-bottom:2px;
}
.link::after{
  content:'';position:absolute;left:0;right:0;bottom:0;height:1px;
  background:currentColor;transform:scaleX(0);transform-origin:right;
  transition:transform var(--t-base) var(--ease);
}
.link:hover{color:var(--brand)}
.link:hover::after{transform:scaleX(1);transform-origin:left}
.link svg{transition:transform var(--t-base) var(--ease)}
.link:hover svg{transform:translateX(3px)}

/* ─────────────────────────────────────────────
   BADGES / TAGS / CHIPS
───────────────────────────────────────────── */
.tag{
  display:inline-flex;align-items:center;
  padding:.28rem .6rem;
  border:1px solid var(--border);
  border-radius:var(--r-xs);
  font-family:var(--ff-mono);
  font-size:var(--fs-note);
  letter-spacing:var(--tr-mono);
  color:var(--text-3);
  background:transparent;
  transition:border-color var(--t-base) var(--ease-soft),color var(--t-base) var(--ease-soft);
}
.tag--brand{border-color:var(--brand-line);color:var(--brand);background:var(--brand-soft)}
.tag--accent{border-color:rgba(14,138,104,.28);color:var(--accent);background:var(--accent-soft)}

.chip{
  display:inline-flex;align-items:center;
  padding:.2rem .5rem;
  border:1px solid var(--border);
  border-radius:var(--r-xs);
  font-family:var(--ff-mono);
  font-size:var(--fs-note);
  color:var(--text-3);
}

.status-tag{
  display:inline-flex;align-items:center;gap:.4rem;
  font-family:var(--ff-mono);font-size:var(--fs-note);
  letter-spacing:var(--tr-mono);color:var(--text-3);
}
.status-tag i{width:5px;height:5px;border-radius:50%;background:var(--accent);flex-shrink:0}
.status-tag.is-wip i{background:var(--warning)}

/* ─────────────────────────────────────────────
   CARTE — langage commun
───────────────────────────────────────────── */
.card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--r-md);
  padding:var(--sp-6);
  transition:border-color var(--t-base) var(--ease-soft),
             box-shadow var(--t-base) var(--ease-soft),
             transform var(--t-base) var(--ease);
}
.card--hover:hover{
  border-color:var(--border-strong);
  box-shadow:var(--sh-soft);
  transform:translateY(-3px);
}

/* Icône encadrée, trait fin */
.icon-box{
  width:42px;height:42px;
  display:grid;place-items:center;
  border:1px solid var(--border);
  border-radius:var(--r-sm);
  color:var(--brand);
  background:var(--surface);
  flex-shrink:0;
  transition:border-color var(--t-base) var(--ease-soft),
             background var(--t-base) var(--ease-soft),
             color var(--t-base) var(--ease-soft);
}
.icon-box svg{width:19px;height:19px}

/* Monogramme (équipe) */
.monogram{
  width:52px;height:52px;
  display:grid;place-items:center;
  border:1px solid var(--border-strong);
  border-radius:var(--r-sm);
  font-family:var(--ff-mono);
  font-size:var(--fs-sm);
  font-weight:500;
  letter-spacing:.06em;
  color:var(--text);
  background:var(--surface-2);
}

/* Filets */
.rule{height:1px;background:var(--border);width:100%}
.rule--brand{background:var(--brand)}

/* ─────────────────────────────────────────────
   FORMULAIRE
───────────────────────────────────────────── */
.contact-form{display:flex;flex-direction:column;gap:1.1rem}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem}
.form-group{display:flex;flex-direction:column;gap:.45rem}
.form-label{
  font-family:var(--ff-mono);
  font-size:var(--fs-note);
  letter-spacing:var(--tr-wide);
  text-transform:uppercase;
  color:var(--text-3);
}
.form-label .req{color:var(--brand);margin-left:1px}

.form-input,.form-select,.form-textarea{
  width:100%;
  background:transparent;
  border:none;
  border-bottom:1px solid var(--border-strong);
  border-radius:0;
  padding:.75rem 0;
  font-size:var(--fs-base);
  color:var(--text);
  outline:none;
  transition:border-color var(--t-base) var(--ease-soft);
  -webkit-appearance:none;appearance:none;
}
.form-input::placeholder,.form-textarea::placeholder{color:var(--text-3)}
.form-input:hover,.form-select:hover,.form-textarea:hover{border-bottom-color:var(--text-3)}
.form-input:focus,.form-select:focus,.form-textarea:focus{border-bottom-color:var(--brand)}
.form-input:focus-visible,.form-select:focus-visible,.form-textarea:focus-visible{outline:none}
.form-input:focus-visible{box-shadow:0 2px 0 0 var(--brand)}

.form-select-wrap{position:relative}
.form-select-wrap::after{
  content:'';position:absolute;right:2px;top:50%;
  width:7px;height:7px;margin-top:-6px;
  border-right:1.5px solid var(--text-3);
  border-bottom:1.5px solid var(--text-3);
  transform:rotate(45deg);
  pointer-events:none;
}
.form-select{padding-right:1.8rem;cursor:pointer}
.form-select option{background:var(--graphite-800);color:var(--paper-100)}
.form-textarea{resize:vertical;min-height:112px;line-height:1.6}

.form-submit{margin-top:.6rem}
.spin{animation:spin .8s linear infinite;display:inline-block}

.form-alert{
  display:flex;align-items:flex-start;gap:.7rem;
  padding:.9rem 1rem;
  border:1px solid var(--border);
  border-radius:var(--r-sm);
  font-size:var(--fs-sm);
  line-height:1.55;
  color:var(--text-2);
}
.form-alert svg{flex-shrink:0;margin-top:2px}
.form-alert--success{border-color:rgba(79,198,163,.35);color:var(--accent)}
.form-alert--success strong{color:var(--accent)}
.form-alert--error{border-color:rgba(166,58,44,.4);color:#E58275}
.form-alert--error strong{color:#E58275}
.form-alert a{text-decoration:underline;text-underline-offset:3px}
.hidden{display:none !important}

/* ── Piège à robots : invisible mais pas display:none
      (certains robots ignorent les champs masqués ainsi) ── */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ── Message d'erreur sous un champ ── */
.field-err{
  font-size:var(--fs-note);
  line-height:1.5;
  color:#E58275;
  margin-top:.1rem;
}
.form-input[aria-invalid="true"],
.form-select[aria-invalid="true"],
.form-textarea[aria-invalid="true"]{border-bottom-color:#E58275}

/* ── Mention de consentement sous le formulaire ── */
.form-consent{
  font-size:var(--fs-note);
  line-height:1.6;
  color:var(--text-3);
  margin-top:.35rem;
}
.form-consent a{text-decoration:underline;text-underline-offset:2px}
.form-consent a:hover{color:var(--brand)}