/**
 * home.css — styles de la page d'accueil dotflo
 * Portage des styles scopés de index.astro. Tous les sélecteurs sont préfixés
 * par .page-home pour éviter toute fuite vers les autres pages (Blade ne scope
 * pas automatiquement comme Astro). Le reveal (.rv) est géré globalement.
 */

/* ===== Boutons (variante home : radius-md + micro-animations) ===== */
.page-home .btn {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-family: var(--font-body); font-weight: 600; font-size: 0.9375rem;
  padding: 0.85rem 1.5rem; border-radius: var(--radius-md);
  cursor: pointer; border: 1px solid transparent; min-height: 48px;
  transition: transform 0.2s var(--ease-out), background 0.2s var(--ease-out), border-color 0.2s var(--ease-out), color 0.2s var(--ease-out);
}
.page-home .btn--primary { background: var(--color-accent); color: #04181D; }
.page-home .btn--primary:hover { transform: translateY(-2px); background: var(--color-text); border-color: var(--color-text); color: var(--color-bg); }
.page-home .btn--ghost { border-color: var(--border-color); color: var(--color-text); }
.page-home .btn--ghost:hover { border-color: var(--color-accent); color: var(--color-accent); }
.page-home .btn .arw { transition: transform 0.2s var(--ease-out); }
.page-home .btn:hover .arw { transform: translateX(3px); }

/* ===== Hero ===== */
.page-home .hero { padding: clamp(3.5rem, 9vw, 8rem) 0 clamp(3rem, 6vw, 5rem); }
.page-home .hero-grid { display: grid; gap: 2.5rem; }
@media (min-width: 980px) { .page-home .hero-grid { grid-template-columns: 1.55fr 1fr; align-items: end; } }
.page-home .hero h1 { font-size: var(--text-h1); margin-top: 1.5rem; max-width: 15ch; }
.page-home .hero .lede { margin-top: 1.75rem; font-size: 1.1875rem; color: var(--color-neutral-1); max-width: 46ch; line-height: 1.6; }
.page-home .hero .actions { margin-top: 2.25rem; display: flex; flex-wrap: wrap; gap: 0.85rem; }
@media (max-width: 520px) { .page-home .hero .actions .btn { width: 100%; justify-content: center; } }

.page-home .signal {
  border: 1px solid var(--border-color);
  background: linear-gradient(180deg, var(--color-surface), var(--color-bg-2));
  border-radius: var(--radius-lg); padding: 1.75rem;
  font-family: var(--font-mono); font-size: 0.82rem; color: var(--color-neutral-1);
}
.page-home .signal .srow { display: flex; justify-content: space-between; gap: 1rem; padding: 0.55rem 0; border-bottom: 1px dashed var(--border-color); }
.page-home .signal .srow:last-child { border-bottom: 0; padding-bottom: 0; }
.page-home .signal .srow span:last-child { color: var(--color-text); text-align: right; }
.page-home .signal .k { color: var(--color-accent); }
.page-home .signal .big { font-family: var(--font-display); font-size: 2.75rem; font-weight: 700; color: var(--color-text); letter-spacing: -0.03em; line-height: 1; margin-bottom: 0.35rem; }
.page-home .signal .big small { font-size: 0.9rem; color: var(--color-neutral-1); font-family: var(--font-mono); font-weight: 400; letter-spacing: 0; }

/* ===== Sections ===== */
.page-home .block { padding: clamp(3.5rem, 8vw, 7rem) 0; }
.page-home .section-head { max-width: 52ch; margin-bottom: clamp(2rem, 4vw, 3.5rem); }
.page-home .section-head h2 { font-size: var(--text-h2); margin-top: 0.9rem; }
.page-home .section-head p { margin-top: 1rem; color: var(--color-neutral-1); font-size: 1.0625rem; max-width: 52ch; }

/* Expertise */
.page-home .crafts { display: grid; gap: 1rem; grid-template-columns: 1fr; }
@media (min-width: 640px) { .page-home .crafts { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .page-home .crafts { grid-template-columns: repeat(4, 1fr); } }
.page-home .craft { border: 1px solid var(--border-color); background: var(--color-surface); border-radius: var(--radius-lg); padding: 1.5rem 1.5rem 1.75rem; transition: border-color 0.25s var(--ease-out), transform 0.25s var(--ease-out), background 0.25s var(--ease-out); }
.page-home .craft:hover { border-color: color-mix(in srgb, var(--color-accent) 32%, transparent); transform: translateY(-3px); background: var(--color-surface-2); }
.page-home .craft .ic { width: 40px; height: 40px; border-radius: var(--radius-md); background: var(--color-accent-alpha-10); display: flex; align-items: center; justify-content: center; color: var(--color-accent); margin-bottom: 1.1rem; font-family: var(--font-mono); }
.page-home .craft h3 { font-size: 1.1875rem; letter-spacing: -0.01em; }
.page-home .craft p { margin-top: 0.6rem; font-size: 0.95rem; color: var(--color-neutral-1); line-height: 1.55; max-width: none; }

/* Offres */
.page-home .offers { display: grid; gap: 1rem; grid-template-columns: 1fr; }
@media (min-width: 860px) { .page-home .offers { grid-template-columns: repeat(3, 1fr); } }
.page-home .offer { border: 1px solid var(--border-color); border-radius: var(--radius-lg); background: linear-gradient(180deg, var(--color-surface), var(--color-bg-2)); padding: 1.75rem; display: flex; flex-direction: column; transition: border-color 0.25s var(--ease-out), transform 0.25s var(--ease-out); }
.page-home .offer:hover { border-color: color-mix(in srgb, var(--color-accent) 32%, transparent); transform: translateY(-3px); }
.page-home .offer .tag { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-neutral-1); }
.page-home .offer h3 { font-size: 1.375rem; margin-top: 0.75rem; }
.page-home .offer p { margin-top: 0.75rem; color: var(--color-neutral-1); font-size: 0.98rem; max-width: none; }
.page-home .offer .go { margin-top: auto; padding-top: 1.5rem; color: var(--color-accent); font-weight: 600; font-size: 0.9rem; }

/* Preuve */
.page-home .proof { border-top: 1px solid var(--border-color); border-bottom: 1px solid var(--border-color); background: var(--color-bg-2); }
.page-home .stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--border-color); border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--border-color); }
@media (min-width: 760px) { .page-home .stats { grid-template-columns: repeat(4, 1fr); } }
.page-home .stat { background: var(--color-bg-2); padding: 1.75rem 1.5rem; }
.page-home .stat .n { font-family: var(--font-display); font-weight: 700; font-size: clamp(2.25rem, 4vw, 3.25rem); color: var(--color-text); letter-spacing: -0.03em; line-height: 1; font-variant-numeric: tabular-nums; }
.page-home .stat .n b { color: var(--color-accent); }
.page-home .stat .l { margin-top: 0.6rem; color: var(--color-neutral-1); font-size: 0.9rem; }
.page-home .pledges { display: grid; gap: 1.5rem; margin-top: 2.5rem; grid-template-columns: 1fr; }
@media (min-width: 760px) { .page-home .pledges { grid-template-columns: repeat(3, 1fr); } }
.page-home .pledge { padding-left: 1.25rem; border-left: 2px solid var(--color-accent); }
.page-home .pledge h3 { font-size: 1.0625rem; font-family: var(--font-body); font-weight: 600; }
.page-home .pledge p { margin-top: 0.4rem; color: var(--color-neutral-1); font-size: 0.95rem; max-width: none; }

/* CTA */
.page-home .cta { text-align: center; }
.page-home .cta-inner { max-width: 44rem; margin-inline: auto; }
.page-home .cta h2 { font-size: var(--text-h2); margin-top: 0.9rem; }
.page-home .cta p { margin-top: 1rem; color: var(--color-neutral-1); font-size: 1.0625rem; margin-inline: auto; }
.page-home .cta .actions { margin-top: 2rem; display: flex; justify-content: center; }