/*
 * style/style.css — Comptable Pro
 * - Un unique dégradé en fond (sur body)
 * - Header & Footer transparents
 * - Hero réorganisé
 * - Tableau comparatif avec deux boutons par ligne
 */

:root{
  --color-primary:#ff7aa2;
  --color-primary-dark:#f45b89;
  --color-secondary:#58d1c4;
  --color-surface:#ffffff;
  --color-muted:#6a5a74;
  --color-border:rgba(255,122,162,.22);
  --font-sans:"Inter","Segoe UI",system-ui,-apple-system,sans-serif;
  --radius-lg:24px;
  --radius:16px;
  --shadow-soft:0 20px 45px rgba(255,122,162,.15);
  --max-width:1180px;
}

/* Reset de base */
*{box-sizing:border-box}
html,body{height:100%}
html{font-size:100%;scroll-behavior:smooth}
body{
  margin:0;
  font-family:var(--font-sans);
  color:#2f1c3f;
  /* Dégradé global unique */
  background:linear-gradient(135deg,#ffe5f2 0%,#e0f6ff 100%) fixed;
  line-height:1.6;
}
a{color:inherit;text-decoration:none}
a:hover,a:focus{color:var(--color-secondary)}
img{display:block;max-width:100%;height:auto}

/* Lien d'évitement */
.skip-link{
  position:absolute;top:-100px;left:1rem;padding:.75rem 1.5rem;
  background:var(--color-secondary);color:#fff;border-radius:999px;z-index:999;transition:top .2s ease
}
.skip-link:focus{top:1rem}

/* ===========================
   HEADER (transparent)
   =========================== */
header{
  background:transparent;            /* fusionne avec le fond global */
  color:#2f1c3f;
  padding:2.5rem 1.5rem 3.5rem;
  border-bottom-left-radius:0;
  border-bottom-right-radius:0;
  box-shadow:none;
  border-bottom:none;
}
.header-inner{max-width:var(--max-width);margin:0 auto}
.header-top{display:flex;align-items:center;justify-content:space-between;gap:2rem}
.brand{display:inline-flex;align-items:center;gap:.75rem;font-weight:700;font-size:1.1rem;letter-spacing:.02em}
.brand svg{width:40px;height:40px}
nav ul{margin:0;padding:0;display:flex;align-items:center;list-style:none;gap:1.25rem}
nav a{font-weight:600;color:rgba(47,28,63,.8);padding:.5rem .9rem;border-radius:999px;transition:background .2s,color .2s}
nav a:hover,nav a:focus{color:#2f1c3f;background:rgba(255,122,162,.15)}

/* =========
   HERO bloc
   ========= */
.hero{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:2.5rem;align-items:center;margin-top:3rem
}
.hero-home{
  background:rgba(255,255,255,.95);
  border-radius:var(--radius-lg);
  padding:2.5rem;
  box-shadow:var(--shadow-soft)
}
.hero-main h1{margin:0 0 1.25rem;font-size:clamp(2.4rem,4vw + 1rem,3.6rem);line-height:1.1}
.hero-cta{display:flex;flex-wrap:wrap;gap:1rem}
.hero-intro{margin:0;color:rgba(47,28,63,.75);font-size:1.05rem}

/* ===========
   Boutons UI
   =========== */
.button{
  display:inline-flex;align-items:center;justify-content:center;font-weight:600;border-radius:999px;
  padding:.85rem 1.6rem;transition:transform .2s,box-shadow .2s,background .2s
}
.button-primary{background:var(--color-primary);color:#fff;box-shadow:0 16px 35px rgba(255,122,162,.28)}
.button-primary:hover,.button-primary:focus{transform:translateY(-2px)}
.button-secondary{background:#fff;color:var(--color-primary);border:2px solid rgba(255,122,162,.25)}
.button-sm{padding:.45rem .9rem;font-size:.9rem}

/* =========================
   Layout général / Sections
   ========================= */
main{padding:0 1.5rem 4rem}
.page{max-width:var(--max-width);margin:0 auto}
.layout-grid{display:grid;grid-template-columns:minmax(0,3fr) minmax(260px,1fr);gap:2.5rem;align-items:start}

.section{
  margin-bottom:3.5rem;background:var(--color-surface);border-radius:var(--radius-lg);
  padding:2.5rem;box-shadow:var(--shadow-soft)
}
.section h2{margin:0 0 1rem;font-size:1.9rem}
.section p.lead{font-size:1.1rem;color:var(--color-muted);margin-bottom:2rem}

/* =====================
   Cartes / Features UI
   ===================== */
.features-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1.5rem}
.feature-card{
  background:linear-gradient(135deg,rgba(255,122,162,.08),rgba(88,209,196,.08));
  padding:1.75rem;border-radius:var(--radius);border:1px solid rgba(255,122,162,.18)
}
.feature-card h3{margin:.1rem 0 .75rem;font-size:1.25rem}

/* =====================
   Tableau comparatif
   ===================== */
.comparison-table{overflow-x:auto;border-radius:var(--radius);border:1px solid var(--color-border)}
.comparison-table table{width:100%;border-collapse:collapse;min-width:720px}
.comparison-table th,.comparison-table td{
  padding:1.1rem;text-align:left;border-bottom:1px solid var(--color-border);vertical-align:top
}
.comparison-table th{background:rgba(255,122,162,.1);font-size:.95rem}
.comparison-table td strong{display:block;margin-bottom:.35rem}

/* Cellule Actions = deux boutons */
td.actions{white-space:nowrap}
td.actions .button{margin-right:.5rem}

/* Badges */
.badge{
  display:inline-flex;align-items:center;font-size:.75rem;text-transform:uppercase;letter-spacing:.08em;font-weight:700;
  padding:.25rem .6rem;border-radius:999px;background:rgba(255,122,162,.18);color:var(--color-primary-dark)
}
.badge-success{background:rgba(88,209,196,.22);color:#269680}
.badge-neutral{background:rgba(88,209,196,.12);color:var(--color-primary)}
.cta-link{display:inline-flex;align-items:center;gap:.4rem;font-weight:600;color:var(--color-primary)}

/* ===========
   Sidebar
   =========== */
.sidebar{display:grid;gap:1.5rem}
.sidebar-card{
  background:#fff;border-radius:var(--radius-lg);padding:2rem;box-shadow:var(--shadow-soft);
  border:1px solid rgba(255,122,162,.18)
}
.sidebar-card h3{margin:0 0 1rem}
.sidebar-card p{margin-bottom:1.25rem;color:var(--color-muted)}
.sidebar-card ul{list-style:none;padding:0;margin:0;display:grid;gap:.75rem}
.sidebar-card li{display:flex;justify-content:space-between;gap:.5rem;font-weight:600}
.sidebar-card li span{color:var(--color-muted);font-weight:500}

/* =========
   Stats
   ========= */
.stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:1.5rem;margin-top:2.5rem}
.stat{
  background:linear-gradient(135deg,rgba(255,122,162,.2),rgba(88,209,196,.2));
  color:#2f1c3f;border-radius:var(--radius);padding:1.75rem;text-align:center
}
.stat strong{display:block;font-size:2rem;margin-bottom:.35rem}

/* =======
   FAQ
   ======= */
.faq-list{display:grid;gap:1.25rem}
.faq-item{
  background:linear-gradient(135deg,rgba(255,122,162,.08),rgba(88,209,196,.08));
  border-radius:var(--radius);padding:1.5rem;border:1px solid rgba(255,122,162,.18)
}
.faq-item h3{margin:.1rem 0 .6rem;font-size:1.1rem}

/* =======================
   CTA Banner (composant)
   ======================= */
.cta-banner{
  background:linear-gradient(135deg,#ff7aa2,#58d1c4);
  color:#2f1c3f;border-radius:var(--radius-lg);padding:2.75rem 2.5rem;display:grid;gap:1.25rem;box-shadow:var(--shadow-soft)
}
.cta-banner p{margin:0;color:rgba(47,28,63,.85)}

/* ===================
   Avis / Témoignages
   =================== */
.review-snippet{
  background:#fff9fd;border-radius:var(--radius);padding:1.75rem;border:1px solid rgba(255,122,162,.24);margin-top:2rem
}
.review-snippet blockquote{margin:0;font-style:italic;color:var(--color-muted)}
.review-snippet cite{display:block;margin-top:1rem;font-weight:600}

/* ===========================
   Fiche cabinet spécifique
   =========================== */
.provider-hero{
  background:linear-gradient(135deg,rgba(255,122,162,.25),rgba(88,209,196,.3));
  color:#2f1c3f;border-radius:var(--radius-lg);padding:2.5rem;display:grid;gap:1rem;box-shadow:var(--shadow-soft);margin-bottom:2rem
}
.provider-hero p{color:rgba(47,28,63,.75)}
.provider-meta{display:flex;flex-wrap:wrap;gap:1.5rem}
.provider-meta span{display:inline-flex;align-items:center;gap:.5rem;font-weight:600;font-size:.95rem}

.highlight-list{list-style:none;padding:0;margin:2rem 0;display:grid;gap:1rem}
.highlight-item{
  background:linear-gradient(135deg,rgba(255,122,162,.08),rgba(88,209,196,.08));
  border-radius:var(--radius);padding:1.5rem;border:1px solid rgba(255,122,162,.18)
}
.highlight-item h3{margin:.1rem 0 .6rem;font-size:1.15rem}

.plan-table{border:1px solid var(--color-border);border-radius:var(--radius);overflow:hidden}
.plan-table table{width:100%;border-collapse:collapse}
.plan-table th,.plan-table td{padding:1rem 1.25rem;border-bottom:1px solid var(--color-border);text-align:left}
.plan-table th{background:rgba(255,122,162,.1);font-size:.95rem}
.plan-table tbody tr:last-child td{border-bottom:none}

/* ============
   Breadcrumb
   ============ */
.breadcrumb{display:inline-flex;align-items:center;gap:.6rem;color:rgba(47,28,63,.7);font-size:.95rem;margin-bottom:1rem}
.breadcrumb a{color:rgba(47,28,63,.75)}

/* ========
   FOOTER (transparent)
   ======== */
footer{
  background:transparent;          /* fusion avec le fond global */
  color:rgba(47,28,63,.8);
  padding:2rem 1.5rem 3rem;
  margin-top:2rem;
  border-top:none;
}
.footer-inner{
  max-width:var(--max-width);margin:0 auto;display:flex;flex-wrap:wrap;justify-content:space-between;gap:1.5rem;font-size:.95rem
}
.footer-inner ul{list-style:none;display:flex;gap:1.25rem;margin:0;padding:0}
.footer-inner a{color:rgba(47,28,63,.8)}

/* ===============
   Responsiveness
   =============== */
@media (max-width:960px){
  nav ul{flex-wrap:wrap;justify-content:flex-end}
  .layout-grid{grid-template-columns:1fr}
  .sidebar{order:-1}
  .section,.sidebar-card{padding:2rem}
}
@media (max-width:640px){
  header{padding:2rem 1.25rem 3.5rem}
  .section{padding:1.75rem}
  .hero{margin-top:2.5rem}
  .comparison-table table{min-width:640px}
  .footer-inner{flex-direction:column;align-items:flex-start}
}