/* =========================================================================
   RefChat — design épuré partagé (site.css)
   Utilisé par les pages internes normalisées. Principes : blanc qui sépare,
   un seul accent indigo, icônes SVG monochromes, beaucoup d'air.
   ========================================================================= */
:root{
  --primary:#5c6bc0; --primary-hover:#4a569d;
  --ink:#1a1d29; --text:#3f4453; --muted:#8b90a0;
  --line:#ececf1; --bg:#ffffff; --bg-tint:#f3f4fb;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  color:var(--text);background:var(--bg);line-height:1.7;-webkit-font-smoothing:antialiased}
.wrap{max-width:1080px;margin:0 auto;padding:0 6%}

/* ---------- Header ---------- */
header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.85);
  backdrop-filter:saturate(180%) blur(12px)}
.header-inner{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  padding:1rem 6%;max-width:1080px;margin:0 auto;gap:.6rem 1.2rem}
.logo{display:flex;align-items:center;gap:10px;font-weight:700;font-size:1.25rem;
  color:var(--ink);text-decoration:none;letter-spacing:-.01em}
.logo-icon{display:grid;place-items:center;width:34px;height:34px;border-radius:9px;
  background:var(--primary);color:#fff;font-size:.95rem;font-weight:700}
nav{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem 1.3rem}
nav a{text-decoration:none;color:var(--text);font-weight:500;font-size:.95rem;white-space:nowrap}
nav a:hover{color:var(--primary)}
nav a.active{color:var(--ink)}
.lang-switch{display:inline-flex;align-items:center;gap:.25rem;font-size:.82rem;font-weight:600}
.lang-switch a{color:var(--muted);text-decoration:none;padding:.22rem .5rem;border-radius:6px;line-height:1}
.lang-switch a:hover{color:var(--ink)}
.lang-switch a.active{color:#fff!important;background:var(--primary)}
.nav-cta{padding:.6rem 1.2rem;border-radius:8px;background:var(--ink);color:#fff!important;
  font-weight:600;font-size:.9rem}
.nav-cta:hover{background:#000}
.burger{display:none;background:none;border:0;font-size:1.5rem;color:var(--ink);cursor:pointer;line-height:1}

/* ---------- Buttons ---------- */
.btn{display:inline-block;text-decoration:none;font-weight:600;border-radius:9px;
  padding:.95rem 2rem;font-size:1rem;transition:transform .15s ease,background .2s ease}
.btn-primary{background:var(--primary);color:#fff}
.btn-primary:hover{background:var(--primary-hover);transform:translateY(-1px)}
.btn-ghost{color:var(--ink);padding:.95rem .5rem}
.btn-ghost:hover{color:var(--primary)}
.btn-ghost .arrow{display:inline-block;transition:transform .2s ease}
.btn-ghost:hover .arrow{transform:translateX(4px)}

/* ---------- Page hero (pages internes) ---------- */
.page-hero{text-align:center;padding:5rem 6% 2.5rem}
.page-hero h1{font-size:clamp(2.2rem,5vw,3.4rem);line-height:1.1;letter-spacing:-.03em;
  color:var(--ink);font-weight:800;max-width:20ch;margin:.6rem auto 1.2rem}
.page-hero h1 span{color:var(--primary)}
.page-hero p{font-size:1.15rem;color:var(--muted);max-width:56ch;margin:0 auto}
.page-hero .hero-actions{display:flex;gap:.5rem;justify-content:center;align-items:center;flex-wrap:wrap;margin-top:2rem}

/* ---------- Sections ---------- */
section{padding:4.5rem 0}
.eyebrow{text-align:center;color:var(--primary);font-weight:600;font-size:.82rem;
  letter-spacing:.08em;text-transform:uppercase;margin-bottom:.8rem}
.section-title{text-align:center;font-size:clamp(1.7rem,3.2vw,2.4rem);color:var(--ink);
  font-weight:700;letter-spacing:-.02em;line-height:1.15;margin:0 auto .9rem;max-width:22ch}
.section-sub{text-align:center;color:var(--muted);max-width:58ch;margin:0 auto 3.5rem;font-size:1.05rem}
.section-tint{background:linear-gradient(160deg,#eef0fb 0%,#f6f7fc 55%,#ffffff 100%)}
/* Bande de fond légère — alternée avec le blanc pour rythmer le défilement */
.tint{background:var(--bg-tint)}

/* ---------- Grille de features (sans boîtes) ---------- */
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:3rem 3rem}
.feature h3{font-size:1.15rem;color:var(--ink);font-weight:650;margin:1.1rem 0 .5rem;letter-spacing:-.01em}
.feature p{color:var(--text);font-size:.97rem}
.feature .link{display:inline-block;margin-top:.9rem;color:var(--primary);font-weight:600;font-size:.92rem;text-decoration:none}
.feature .link:hover{text-decoration:underline}
.icon-badge{display:grid;place-items:center;width:48px;height:48px;border-radius:12px;
  background:var(--bg-tint);color:var(--primary)}
.icon-badge svg{width:24px;height:24px}

/* ---------- Table de données ---------- */
.table-wrap{max-width:900px;margin:0 auto;overflow-x:auto}
.data-table{width:100%;border-collapse:collapse;font-size:.95rem}
.data-table th{text-align:left;font-weight:600;color:var(--ink);font-size:.74rem;
  text-transform:uppercase;letter-spacing:.05em;padding:0 1.1rem 1rem;border-bottom:2px solid var(--line)}
.data-table td{padding:1rem 1.1rem;border-bottom:1px solid var(--line);color:var(--text);vertical-align:top}
.data-table td strong{color:var(--ink)}
.data-table tr:last-child td{border-bottom:0}
.data-table .yes{color:#2d9e6e;font-weight:600}
.data-table .no{color:#c93535;font-weight:600}
.data-table code{background:var(--bg-tint);padding:1px 6px;border-radius:4px;font-size:.85em}

/* ---------- CTA final ---------- */
.cta{text-align:center;padding:6rem 6%;background:var(--ink);color:#fff}
.cta h2{font-size:clamp(1.8rem,3.5vw,2.5rem);font-weight:700;letter-spacing:-.02em;
  margin-bottom:1rem;max-width:20ch;margin-inline:auto}
.cta p{color:#a7abbd;max-width:48ch;margin:0 auto 2.4rem;font-size:1.05rem}
.cta .btn-primary{background:#fff;color:var(--ink)}
.cta .btn-primary:hover{background:#f0f0f5}

/* ---------- Embeds (animation du soft) ---------- */
.embed{max-width:880px;margin:2.5rem auto 0;border-radius:16px;overflow:hidden;
  box-shadow:0 30px 70px -30px rgba(26,29,41,.45),0 8px 20px -12px rgba(26,29,41,.25)}
.embed-stage{position:relative;width:100%;overflow:hidden}
.embed-stage iframe{position:absolute;top:0;left:0;border:0;transform-origin:top left}
.embed-stage.lock iframe{pointer-events:none}
.embed-hint{text-align:center;margin-top:1.3rem;font-size:.9rem;color:var(--primary);font-weight:600}

/* ---------- Footer ---------- */
.site-footer{padding:4rem 6% 2rem;border-top:1px solid var(--line)}
.foot-inner{max-width:1080px;margin:0 auto;display:flex;justify-content:space-between;
  flex-wrap:wrap;gap:1.5rem;align-items:center;color:var(--muted);font-size:.9rem}
.foot-links{display:flex;gap:1.4rem;flex-wrap:wrap}
.foot-links a{color:var(--text);text-decoration:none}
.foot-links a:hover{color:var(--primary)}
.foot-legal{max-width:1080px;margin:2.2rem auto 0;text-align:center;color:var(--muted);
  font-size:.82rem;line-height:1.7}
.foot-legal a{color:var(--primary);text-decoration:none}

/* ---------- Responsive ---------- */
/* Pas de burger : le nav reste affiché et s'enroule ; logo+nav centrés en écran étroit */
@media(max-width:900px){
  .header-inner{justify-content:center}
  nav{justify-content:center;width:100%}
}
@media(max-width:760px){
  section{padding:3.2rem 0}
  .page-hero{padding:3.5rem 6% 2rem}
}

/* ---------- Listes à coches ---------- */
.check-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.7rem}
.check-list li{position:relative;padding-left:1.7rem;color:var(--text);font-size:.94rem;line-height:1.5}
.check-list li::before{content:'✓';position:absolute;left:0;top:0;color:var(--primary);font-weight:700}
.check-list li.warn::before{content:'!';color:#b8720f}
.check-list li strong{color:var(--ink)}

/* ---------- Cartes de prix ---------- */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(238px,1fr));gap:1.5rem;max-width:1080px;margin:0 auto}
.price-card{border:1px solid var(--line);border-radius:16px;padding:2rem 1.6rem;display:flex;flex-direction:column;background:#fff;transition:transform .15s ease,box-shadow .2s ease}
.price-card:hover{transform:translateY(-3px);box-shadow:0 20px 40px -24px rgba(26,29,41,.3)}
.price-card.featured{border-color:var(--primary);box-shadow:0 20px 50px -28px rgba(92,107,192,.55)}
.price-card h3{font-size:1.2rem;color:var(--ink);font-weight:700;margin-bottom:.35rem}
.price-card .desc{color:var(--muted);font-size:.9rem;margin-bottom:1.1rem}
.price-tag{font-size:2.1rem;font-weight:800;color:var(--ink);letter-spacing:-.02em;margin-bottom:1.2rem;line-height:1}
.price-tag small{font-size:.9rem;font-weight:500;color:var(--muted)}
.price-card .check-list{margin-bottom:1.6rem;flex-grow:1}
.price-card .btn{margin-top:auto;text-align:center}
.price-card .btn-soft{background:var(--bg-tint);color:var(--primary)}
.price-card .btn-soft:hover{background:#e7e9f7}
.pricing-note{text-align:center;color:var(--muted);font-size:.92rem;margin-top:2.5rem}
.pricing-note a{color:var(--primary)}

/* ---------- Étapes ---------- */
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:2.5rem;max-width:980px;margin:0 auto}
.step{text-align:center}
.step .num{display:grid;place-items:center;width:52px;height:52px;margin:0 auto 1.2rem;border-radius:50%;background:var(--primary);color:#fff;font-size:1.3rem;font-weight:700}
.step h3{font-size:1.1rem;color:var(--ink);font-weight:650;margin-bottom:.5rem}
.step p{color:var(--text);font-size:.95rem}

/* ---------- Cartes de mode (local / cloud) ---------- */
.modes-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:1.5rem;max-width:980px;margin:0 auto}
.mode-card{border:1px solid var(--line);border-radius:16px;padding:2rem;background:#fff}
.mode-card.cloud{background:linear-gradient(160deg,#f3f4fb,#ffffff)}
.mode-card h3{font-size:1.2rem;color:var(--ink);font-weight:700;margin-bottom:.4rem}
.mode-card .tagline{color:var(--muted);font-size:.95rem;margin-bottom:1.2rem}
.mode-tag{margin-top:1.4rem;display:inline-block;font-size:.78rem;font-weight:600;color:var(--primary);background:var(--bg-tint);padding:.4rem .9rem;border-radius:999px}

/* ---------- Encadré (verdict / note) ---------- */
.callout{max-width:880px;margin:2.5rem auto 0;background:var(--bg-tint);border-radius:16px;padding:1.8rem 2rem}
.callout h3{color:var(--ink);font-weight:700;margin-bottom:.5rem}
.callout p{color:var(--text);font-size:.97rem}
.callout strong{color:var(--ink)}

/* ---------- FAQ (accordéon natif) ---------- */
.faq-list{max-width:820px;margin:0 auto;display:flex;flex-direction:column;gap:.6rem}
.faq-item{border:1px solid var(--line);border-radius:12px;background:#fff;overflow:hidden}
.faq-item summary{list-style:none;cursor:pointer;padding:1.1rem 1.3rem;font-weight:600;color:var(--ink);font-size:1rem;display:flex;align-items:center;justify-content:space-between;gap:1rem}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:'+';color:var(--primary);font-size:1.3rem;font-weight:400;flex-shrink:0;transition:transform .2s}
.faq-item[open] summary::after{transform:rotate(45deg)}
.faq-item .faq-body{padding:0 1.3rem 1.2rem;color:var(--text);font-size:.95rem;line-height:1.7}
.faq-item .faq-body a{color:var(--primary)}

/* ---------- Formulaire (contact) ---------- */
.form{max-width:620px;margin:0 auto;display:flex;flex-direction:column;gap:1rem}
.form label{display:block;font-size:.82rem;font-weight:600;color:var(--ink);margin-bottom:.4rem}
.form input,.form textarea,.form select{width:100%;padding:.8rem 1rem;border:1px solid var(--line);border-radius:10px;font-family:inherit;font-size:.95rem;color:var(--ink);background:#fff;transition:border-color .15s,box-shadow .15s}
.form input:focus,.form textarea:focus,.form select:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px rgba(92,107,192,.12)}
.form textarea{resize:vertical;min-height:140px}
.form .btn-primary{border:0;cursor:pointer;align-self:flex-start}
.form-note{font-size:.85rem;color:var(--muted);text-align:center;margin-top:1rem}
.form-status{text-align:center;font-size:.95rem;padding:.8rem;border-radius:10px;display:none}
.form-status.ok{display:block;background:#e2f5ec;color:#2d9e6e}
.form-status.err{display:block;background:#fce8e8;color:#c93535}
.form-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1rem}
.honeypot{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-msg{text-align:center;font-size:.95rem;margin-top:.4rem;min-height:1.2em}
.form-msg.success{color:#2d9e6e}
.form-msg.error{color:#c93535}