/* ============================================================================
   ArtisanGad — Design System web (miroir EXACT de l'app Flutter)
   Source de vérité : app/lib/core/constants/app_colors.dart, app_text_styles.dart,
   app_shadows.dart, app_gradients.dart, app_sizes.dart. Ne pas diverger.
   ========================================================================== */

/* ── Polices (mêmes fichiers que l'app : variables Plus Jakarta Sans + JetBrains Mono) ── */
@font-face {
  font-family: 'Plus Jakarta Sans';
  src: url('/assets/fonts/PlusJakartaSans-Variable.ttf') format('truetype');
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('/assets/fonts/JetBrainsMono-Variable.ttf') format('truetype');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

/* ── Tokens (valeurs reprises 1:1 de l'app) ── */
:root {
  /* Marque */
  --ag-primary: #13223C;        /* navy */
  --ag-primary-light: #22365C;
  --ag-royal: #22365C;
  --ag-accent: #EC6A1F;         /* orange */
  --ag-accent-dark: #C85A14;
  --ag-accent-light: #F6883F;
  --ag-gold: #C8A04B;
  --ag-gold-light: #E7C77E;
  /* Neutres */
  --ag-bg: #F7F9FC;
  --ag-surface: #FFFFFF;
  --ag-surface-muted: #F2F5FA;
  --ag-border: #E6EAF1;
  --ag-border-soft: #EDF0F5;
  /* Texte (3 niveaux) */
  --ag-text: #15233F;
  --ag-text-2: #5C6B85;
  --ag-text-3: #97A2B6;
  /* Sémantique */
  --ag-success: #2F7D5B;
  --ag-warning: #D38A2B;
  --ag-error: #C03A2B;
  --ag-info: #3B5A86;
  /* Teintes */
  --ag-accent-tint: #FDEFE3;
  --ag-success-tint: #E7F1EC;
  --ag-warning-tint: #FBF0DF;
  --ag-error-tint: #FBEAE7;
  --ag-info-tint: #EDF1F7;
  --ag-gold-tint: #F6EFDD;
  /* Rayons (radiusSm..Xl + full) */
  --ag-r-sm: 8px;
  --ag-r-md: 12px;
  --ag-r-lg: 16px;
  --ag-r-xl: 24px;
  --ag-r-full: 999px;
  /* Espacements (xs..xxl + section) */
  --ag-xs: 4px;  --ag-sm: 8px;  --ag-md: 16px;
  --ag-lg: 24px; --ag-xl: 32px; --ag-xxl: 48px; --ag-section: 40px;
  /* Ombres (teinte navy exacte : AppShadows) */
  --ag-e1: 0 8px 20px rgba(19,34,60,.08), 0 1px 3px rgba(19,34,60,.05);
  --ag-e2: 0 10px 28px rgba(19,34,60,.10);
  --ag-e3: 0 16px 40px rgba(19,34,60,.14);
  --ag-glow: 0 8px 22px rgba(236,106,31,.32);
  /* Gradients (AppGradients) */
  --ag-grad-brand: linear-gradient(135deg, #22365C, #13223C);
  --ag-grad-accent: linear-gradient(90deg, #EC6A1F, #F6883F);
  --ag-grad-premium: linear-gradient(135deg, #C8A04B, #E7C77E);
  /* Typo */
  --ag-font: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --ag-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
}

/* ── Reset léger ── */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--ag-font);
  color: var(--ag-text);
  background: var(--ag-surface);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }
h1, h2, h3, h4, p { margin: 0; }
:focus-visible { outline: 2px solid var(--ag-accent); outline-offset: 2px; border-radius: 6px; }

/* ── Layout ── */
.ag-wrap { max-width: 1200px; margin: 0 auto; padding: 0 32px; }
.ag-section { padding: 84px 0; }
.ag-section-sm { padding: 60px 0; }
.ag-bg-muted { background: var(--ag-bg); }
.ag-bg-navy { background: var(--ag-primary); color: #fff; }
.ag-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.ag-grid3 { display: grid; grid-template-columns: repeat(3,1fr); gap: 24px; }
.ag-grid4 { display: grid; grid-template-columns: repeat(4,1fr); gap: 20px; }
.ag-center { text-align: center; }
.ag-mt-sm { margin-top: 12px; } .ag-mt { margin-top: 24px; } .ag-mt-lg { margin-top: 40px; }

/* ── Typographie (échelle app + tailles « hero » marketing) ── */
.ag-label { /* sectionLabel : mono majuscule lettré */
  font-family: var(--ag-mono); font-size: 12px; font-weight: 600;
  letter-spacing: 2.5px; text-transform: uppercase; color: var(--ag-accent);
}
.ag-display { font-size: 54px; line-height: 1.04; font-weight: 800; letter-spacing: -1.8px; }
.ag-h2 { font-size: 38px; line-height: 1.1; font-weight: 800; letter-spacing: -1.1px; }
.ag-h3 { font-size: 18px; font-weight: 800; letter-spacing: -0.3px; }     /* titleLarge */
.ag-lead { font-size: 18px; line-height: 1.6; color: var(--ag-text-2); }
.ag-body { font-size: 15px; line-height: 1.5; color: var(--ag-text-2); }  /* bodyMedium */
.ag-amount { font-size: 30px; font-weight: 800; letter-spacing: -1px; font-variant-numeric: tabular-nums; }
.ag-accent-text { color: var(--ag-accent); }

/* ── Boutons (PrimaryButton/SecondaryButton de l'app) ── */
.ag-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  font-family: var(--ag-font); font-size: 16px; font-weight: 800;
  padding: 16px 26px; border-radius: 14px; border: none; cursor: pointer;
  transition: transform .12s ease, box-shadow .2s ease, background .15s ease;
  white-space: nowrap;
}
.ag-btn svg { width: 18px; height: 18px; }
.ag-btn-primary { background: var(--ag-accent); color: #fff; box-shadow: var(--ag-glow); }
.ag-btn-primary:hover { transform: translateY(-1px); box-shadow: 0 16px 32px rgba(236,106,31,.4); }
.ag-btn-secondary { background: var(--ag-surface); color: var(--ag-text); border: 1.5px solid var(--ag-border); }
.ag-btn-secondary:hover { border-color: var(--ag-text-3); }
.ag-btn-onnavy { background: rgba(255,255,255,.1); color: #fff; border: 1px solid rgba(255,255,255,.18); }
.ag-btn-onnavy:hover { background: rgba(255,255,255,.16); }
.ag-btn-sm { padding: 11px 18px; font-size: 14.5px; font-weight: 700; border-radius: 12px; box-shadow: 0 8px 18px rgba(236,106,31,.26); }
.ag-btn-block { width: 100%; }

/* ── Cartes (AGCard / AppCard) ── */
.ag-card {
  background: var(--ag-surface); border: 1px solid var(--ag-border);
  border-radius: var(--ag-r-xl); padding: 26px;
}
.ag-card-soft { background: var(--ag-bg); border-color: var(--ag-border-soft); border-radius: 20px; padding: 24px; }
.ag-card-elev { box-shadow: var(--ag-e1); }
.ag-card-hero { /* AGHeroCard : carte dégradé navy */
  background: var(--ag-grad-brand); color: #fff;
  border-radius: var(--ag-r-xl); padding: 26px; box-shadow: var(--ag-e3);
}

/* ── Badges / chips / pills (StatusPill, AppBadge) ── */
.ag-chip {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 12.5px; font-weight: 700; padding: 7px 13px; border-radius: var(--ag-r-full);
}
.ag-chip-accent { background: var(--ag-accent-tint); color: var(--ag-accent-dark); border: 1px solid #F8DEC9; }
.ag-chip-success { background: var(--ag-success-tint); color: var(--ag-success); }
.ag-chip-dot::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.ag-pill-recommended { background: var(--ag-accent); color: #fff; font-size: 11px; font-weight: 800; padding: 6px 14px; border-radius: var(--ag-r-full); }
.ag-verified { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 700; color: var(--ag-success); }

/* ── Icône d'étape / feature (carré teinté, comme l'app) ── */
.ag-ico {
  width: 48px; height: 48px; border-radius: 14px;
  display: flex; align-items: center; justify-content: center; flex: none;
}
.ag-ico-accent { background: var(--ag-accent-tint); color: var(--ag-accent); }
.ag-ico-success { background: var(--ag-success-tint); color: var(--ag-success); }
.ag-ico svg { width: 24px; height: 24px; }

/* ── Header / nav (coque app : logo + actif orange) ── */
.ag-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,255,255,.86); backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--ag-border-soft);
}
.ag-nav { height: 72px; display: flex; align-items: center; justify-content: space-between; }
.ag-logo { display: flex; align-items: center; gap: 10px; }
.ag-logo-mark {
  width: 34px; height: 34px; border-radius: 10px;
  background: var(--ag-grad-brand); display: flex; align-items: center; justify-content: center;
}
.ag-logo-text { font-size: 18px; font-weight: 800; letter-spacing: -0.4px; color: var(--ag-text); }
.ag-navlinks { display: flex; gap: 22px; align-items: center; }
.ag-navlinks a { font-size: 14.5px; font-weight: 600; color: var(--ag-text-2); }
.ag-navlinks a:hover, .ag-navlinks a.is-active { color: var(--ag-accent); }
.ag-nav-cta { display: flex; align-items: center; gap: 14px; }
.ag-burger { display: none; background: none; border: 0; padding: 8px; cursor: pointer; }

/* ── Footer ── */
.ag-footer { background: #0F1B30; color: #fff; padding: 60px 0 34px; }
.ag-foot-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 32px; }
.ag-foot-grid h4 { font-size: 13px; font-weight: 700; margin-bottom: 14px; }
.ag-foot-col { display: flex; flex-direction: column; gap: 11px; }
.ag-foot-col a { font-size: 14px; color: #8A95A8; }
.ag-foot-col a:hover { color: #fff; }
.ag-foot-bottom {
  border-top: 1px solid rgba(255,255,255,.08); margin-top: 40px; padding-top: 22px;
  display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; align-items: center;
}
.ag-foot-bottom span { font-size: 13px; color: #6B7790; }

/* ── Section header centré ── */
.ag-sec-head { text-align: center; max-width: 640px; margin: 0 auto 52px; }
.ag-sec-head .ag-label { margin-bottom: 14px; display: inline-block; }
.ag-sec-head .ag-h2 { margin-bottom: 14px; }

/* ── Liste à puces vérifiée ── */
.ag-checks { display: flex; flex-direction: column; gap: 14px; }
.ag-check { display: flex; align-items: center; gap: 13px; font-size: 15.5px; font-weight: 600; }
.ag-check .ag-tick {
  width: 32px; height: 32px; border-radius: 9px; background: var(--ag-success-tint);
  display: flex; align-items: center; justify-content: center; flex: none; color: var(--ag-success);
}

/* ── Tarifs ── */
.ag-price { display: flex; align-items: baseline; gap: 6px; margin: 14px 0 6px; }
.ag-price .amt { font-size: 42px; font-weight: 800; letter-spacing: -1.5px; }
.ag-price .per { font-size: 15px; color: var(--ag-text-3); }
.ag-plan { display: flex; flex-direction: column; }
.ag-plan-feat { display: flex; flex-direction: column; gap: 12px; flex: 1; }
.ag-plan-feat > div { display: flex; align-items: center; gap: 10px; font-size: 14px; color: #2B3A56; }

/* ── FAQ (accordéon natif) ── */
.ag-faq details {
  border: 1px solid var(--ag-border); border-radius: var(--ag-r-lg);
  padding: 4px 20px; margin-bottom: 12px; background: var(--ag-surface);
}
.ag-faq summary {
  list-style: none; cursor: pointer; padding: 16px 0; font-weight: 700; font-size: 16px;
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
}
.ag-faq summary::-webkit-details-marker { display: none; }
.ag-faq summary::after { content: "+"; font-size: 22px; color: var(--ag-accent); font-weight: 700; }
.ag-faq details[open] summary::after { content: "–"; }
.ag-faq p { padding: 0 0 18px; color: var(--ag-text-2); font-size: 15px; line-height: 1.6; }

/* ── Formulaire (contact) ── */
.ag-field { display: flex; flex-direction: column; gap: 7px; margin-bottom: 16px; }
.ag-field label { font-size: 13.5px; font-weight: 700; color: var(--ag-text); }
.ag-field input, .ag-field textarea, .ag-field select {
  font-family: var(--ag-font); font-size: 15px; color: var(--ag-text);
  padding: 13px 15px; border: 1.5px solid var(--ag-border); border-radius: var(--ag-r-md);
  background: var(--ag-surface); width: 100%;
}
.ag-field input:focus, .ag-field textarea:focus, .ag-field select:focus {
  outline: none; border-color: var(--ag-accent);
}

/* ── Bloc CTA final (dégradé navy + rond orange) ── */
.ag-cta-final {
  background: var(--ag-grad-brand); border-radius: 30px; padding: 56px;
  text-align: center; position: relative; overflow: hidden; color: #fff;
}
.ag-cta-final::before {
  content: ""; position: absolute; top: -60px; right: -40px; width: 240px; height: 240px;
  border-radius: 50%; background: radial-gradient(circle, rgba(236,106,31,.28), transparent 70%);
}
.ag-cta-final > * { position: relative; }

/* ── Animation douce (parité avec les micro-animations de l'app) ── */
@keyframes agFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
.ag-float { animation: agFloat 5s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .ag-float { animation: none; } html { scroll-behavior: auto; } }

/* ── Responsive (mobile / tablette / desktop) ── */
@media (max-width: 960px) {
  .ag-grid3, .ag-grid2 { grid-template-columns: 1fr; }
  .ag-grid4 { grid-template-columns: 1fr 1fr; }
  .ag-navlinks { display: none; }
  .ag-burger { display: inline-flex; }
  .ag-display { font-size: 42px; letter-spacing: -1.2px; }
  .ag-h2 { font-size: 30px; }
  .ag-hide-sm { display: none !important; }
  .ag-foot-grid { grid-template-columns: 1fr 1fr; gap: 28px; }
  .ag-cta-final { padding: 40px 24px; }
}
@media (max-width: 560px) {
  .ag-wrap { padding: 0 20px; }
  .ag-grid4 { grid-template-columns: 1fr; }
  .ag-display { font-size: 34px; }
  .ag-section { padding: 60px 0; }
  .ag-foot-grid { grid-template-columns: 1fr; }
}

/* ── Menu mobile (déployé par site.js) ── */
.ag-mobile-menu {
  display: none; flex-direction: column; gap: 4px; padding: 12px 20px 20px;
  border-bottom: 1px solid var(--ag-border-soft); background: #fff;
}
.ag-mobile-menu.open { display: flex; }
.ag-mobile-menu a { padding: 12px 0; font-weight: 600; color: var(--ag-text); border-bottom: 1px solid var(--ag-border-soft); }