/*
Theme Name: AgentDeck — MedIA & ImmoIA
Theme URI: https://agentdeck.io
Author: Biggie Tech
Author URI: https://biggie-tech.com
Description: Thème WordPress officiel pour la promotion et vente des agents IA AgentDeck — MedIA (santé) et ImmoIA (immobilier). Design blanc premium, sections produit, tarifs, formulaire de commande intégré.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 8.0
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: agentdeck
Tags: landing-page, one-page, white, minimal, business, medical, real-estate
*/

/* ═══════════════════════════════════════════════════════════════
   AGENTDECK THEME — Design System : White × Steel × Teal × Amber
   ═══════════════════════════════════════════════════════════════ */

/* Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,400;0,9..144,600;0,9..144,700;1,9..144,300;1,9..144,400&family=DM+Sans:wght@300;400;500;600;700&family=DM+Mono:wght@300;400;500&display=swap');

/* ── Variables ─────────────────────────────────────────────────── */
:root {
  --white:    #ffffff;
  --off:      #fafafa;
  --off2:     #f4f5f7;
  --off3:     #edeef2;
  --ink:      #0e0f14;
  --ink2:     #1c1d26;
  --ink3:     #2d2f3e;
  --steel:    #6b7080;
  --steel2:   #9498a8;
  --steel3:   #bbbec9;
  --bd:       #e4e6ed;
  --bd2:      #d0d3de;

  --med:      #0BBFBD;
  --med-d:    #089997;
  --med-bg:   rgba(11,191,189,.08);
  --med-bd:   rgba(11,191,189,.2);

  --immo:     #D4943A;
  --immo-d:   #b07428;
  --immo-bg:  rgba(212,148,58,.08);
  --immo-bd:  rgba(212,148,58,.2);

  --shadow-sm: 0 1px 3px rgba(14,15,20,.08), 0 1px 2px rgba(14,15,20,.06);
  --shadow:    0 4px 16px rgba(14,15,20,.08), 0 2px 6px rgba(14,15,20,.05);
  --shadow-lg: 0 20px 60px rgba(14,15,20,.12), 0 8px 24px rgba(14,15,20,.06);
  --shadow-xl: 0 40px 100px rgba(14,15,20,.15), 0 16px 40px rgba(14,15,20,.08);

  --h1: 'Fraunces', Georgia, serif;
  --ui: 'DM Sans', system-ui, sans-serif;
  --mono: 'DM Mono', monospace;

  --radius: 12px;
  --radius-lg: 20px;
  --radius-xl: 28px;
}

/* ── Reset & Base ──────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; scroll-behavior: smooth; }
body { background: var(--white); color: var(--ink); font-family: var(--ui); overflow-x: hidden; line-height: 1.6; -webkit-font-smoothing: antialiased; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: var(--ui); cursor: pointer; }

/* ── Layout ────────────────────────────────────────────────────── */
.container { max-width: 1160px; margin: 0 auto; padding: 0 32px; }
.container--narrow { max-width: 760px; margin: 0 auto; padding: 0 32px; }

/* ── Typography ────────────────────────────────────────────────── */
.t-label {
  font-family: var(--mono); font-size: 11px; font-weight: 500;
  letter-spacing: .18em; text-transform: uppercase; color: var(--steel2);
  display: flex; align-items: center; gap: 10px;
}
.t-label::before { content:''; width:24px; height:1px; background:var(--steel3); }

.t-display {
  font-family: var(--h1); font-size: clamp(44px, 5.5vw, 80px);
  font-weight: 300; line-height: 1.05; letter-spacing: -.02em; color: var(--ink);
}
.t-display em { font-style: italic; }
.t-display strong { font-weight: 700; display: block; }
.t-display .med-em  { color: var(--med); }
.t-display .immo-em { color: var(--immo); }

.t-h2 { font-family: var(--h1); font-size: clamp(32px, 3.5vw, 52px); font-weight: 300; line-height: 1.1; letter-spacing: -.01em; }
.t-h3 { font-family: var(--h1); font-size: clamp(24px, 2.5vw, 36px); font-weight: 400; line-height: 1.15; }
.t-body { font-size: 17px; line-height: 1.75; color: var(--steel); }
.t-small { font-size: 14px; line-height: 1.65; color: var(--steel2); }
.t-mono { font-family: var(--mono); }

/* ── Buttons ───────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 13px 28px; border-radius: 8px;
  font-size: 14px; font-weight: 600; letter-spacing: .02em;
  transition: all .2s; border: none; text-decoration: none;
}
.btn--primary { background: var(--ink); color: #fff; box-shadow: var(--shadow); }
.btn--primary:hover { background: var(--ink2); transform: translateY(-1px); box-shadow: var(--shadow-lg); }
.btn--med   { background: var(--med);  color: #fff; box-shadow: 0 4px 16px rgba(11,191,189,.3); }
.btn--med:hover { background: var(--med-d); transform: translateY(-1px); }
.btn--immo  { background: var(--immo); color: #fff; box-shadow: 0 4px 16px rgba(212,148,58,.3); }
.btn--immo:hover { background: var(--immo-d); transform: translateY(-1px); }
.btn--ghost { background: transparent; border: 1.5px solid var(--bd2); color: var(--ink3); }
.btn--ghost:hover { border-color: var(--ink3); background: var(--off2); }
.btn--lg { padding: 16px 36px; font-size: 15px; }

/* ── Badges ────────────────────────────────────────────────────── */
.badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 12px; border-radius: 100px;
  font-size: 12px; font-weight: 600; letter-spacing: .04em;
}
.badge--med  { background: var(--med-bg);  border: 1px solid var(--med-bd);  color: var(--med-d); }
.badge--immo { background: var(--immo-bg); border: 1px solid var(--immo-bd); color: var(--immo-d); }
.badge--neutral { background: var(--off2); border: 1px solid var(--bd); color: var(--steel); }

/* ── Cards ─────────────────────────────────────────────────────── */
.card {
  background: var(--white); border: 1px solid var(--bd);
  border-radius: var(--radius-lg); padding: 28px;
  box-shadow: var(--shadow); transition: box-shadow .25s, transform .25s;
}
.card:hover { box-shadow: var(--shadow-lg); transform: translateY(-3px); }

/* ── Divider ───────────────────────────────────────────────────── */
.divider { height: 1px; background: var(--bd); }

/* ── Reveal ────────────────────────────────────────────────────── */
.reveal {
  opacity: 0; transform: translateY(20px);
  transition: opacity .65s ease, transform .65s cubic-bezier(.17,.67,.3,1);
}
.reveal.visible { opacity: 1; transform: none; }
.delay-1 { transition-delay: .08s; }
.delay-2 { transition-delay: .16s; }
.delay-3 { transition-delay: .24s; }
.delay-4 { transition-delay: .32s; }
.delay-5 { transition-delay: .40s; }