/* iaxion — Ressources : feuille de style commune
   Réutilise les variables de couleur du site principal (index.css) si chargé.
   Pages statiques, mobile-first, sobre. */

:root{
  --bg:#fafafa;
  --surface:#ffffff;
  --ink:#111827;
  --ink-soft:#374151;
  --muted:#6b7280;
  --line:#e5e7eb;
  --brand:#4f46e5;
  --brand-soft:#eef2ff;
  --teal:#0d9488;
  --radius:14px;
  --maxw:880px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,sans-serif;
  background:var(--bg);
  color:var(--ink);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}

a{color:var(--brand);text-decoration:none}
a:hover{text-decoration:underline}

/* --- Header / nav --- */
.res-nav{
  background:var(--surface);
  border-bottom:1px solid var(--line);
  padding:14px 24px;
}
.res-nav-inner{
  max-width:var(--maxw);margin:0 auto;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
}
.res-nav-logo{display:flex;align-items:center;gap:10px;color:var(--ink);font-weight:700}
.res-nav-logo img{width:32px;height:32px}
.res-nav-logo small{color:var(--muted);font-weight:400}
.res-nav-links{display:flex;gap:18px;flex-wrap:wrap}
.res-nav-links a{color:var(--ink-soft);font-size:.95rem}
.res-nav-links a.active{color:var(--brand);font-weight:600}

/* --- Breadcrumbs --- */
.crumbs{
  max-width:var(--maxw);margin:18px auto 0;padding:0 24px;
  font-size:.85rem;color:var(--muted);
}
.crumbs a{color:var(--muted)}
.crumbs a:hover{color:var(--brand)}

/* --- Article --- */
.res-article{
  max-width:var(--maxw);margin:0 auto;padding:28px 24px 64px;
}
.res-eyebrow{
  display:inline-block;background:var(--brand-soft);color:var(--brand);
  font-size:.78rem;font-weight:600;padding:4px 10px;border-radius:999px;
  margin-bottom:14px;letter-spacing:.02em;
}
.res-article h1{
  font-size:2rem;line-height:1.2;margin:0 0 12px;
}
.res-lede{
  font-size:1.1rem;color:var(--ink-soft);margin:0 0 28px;
}
.res-article h2{
  font-size:1.4rem;margin:36px 0 12px;padding-top:8px;
}
.res-article h3{
  font-size:1.1rem;margin:24px 0 8px;
}
.res-article p, .res-article li{font-size:1rem}
.res-article ul, .res-article ol{padding-left:22px}
.res-article li{margin-bottom:6px}

/* --- Encarts --- */
.res-callout{
  background:var(--surface);border:1px solid var(--line);
  border-left:4px solid var(--brand);
  padding:14px 18px;border-radius:8px;margin:20px 0;
  color:var(--ink-soft);
}

/* --- Table comparative --- */
.res-table{
  width:100%;border-collapse:collapse;margin:20px 0;
  background:var(--surface);border:1px solid var(--line);border-radius:8px;
  overflow:hidden;
}
.res-table th, .res-table td{
  padding:10px 14px;text-align:left;border-bottom:1px solid var(--line);
  font-size:.95rem;
}
.res-table th{background:#f9fafb;font-weight:600;color:var(--ink)}
.res-table tr:last-child td{border-bottom:none}
.res-table td.ok{color:#059669;font-weight:600}
.res-table td.no{color:#9ca3af}

/* --- FAQ --- */
.res-faq details{
  background:var(--surface);border:1px solid var(--line);border-radius:8px;
  padding:14px 18px;margin-bottom:10px;
}
.res-faq summary{
  cursor:pointer;font-weight:600;color:var(--ink);
  list-style:none;
}
.res-faq summary::-webkit-details-marker{display:none}
.res-faq summary::after{content:" +";color:var(--muted);float:right}
.res-faq details[open] summary::after{content:" −"}
.res-faq details[open] summary{margin-bottom:10px}
.res-faq p{margin:6px 0 0;color:var(--ink-soft)}

/* --- CTA produits --- */
.res-cta{
  background:linear-gradient(135deg,#eef2ff,#e0e7ff);
  border-radius:var(--radius);padding:22px 24px;margin:32px 0;
  display:flex;flex-direction:column;gap:12px;
}
.res-cta h3{margin:0;font-size:1.15rem}
.res-cta-row{display:flex;gap:10px;flex-wrap:wrap}
.res-btn{
  display:inline-flex;align-items:center;gap:6px;
  padding:9px 16px;border-radius:8px;font-weight:600;font-size:.92rem;
  background:var(--brand);color:#fff;border:1px solid var(--brand);
}
.res-btn:hover{background:#4338ca;text-decoration:none}
.res-btn.ghost{background:transparent;color:var(--brand)}
.res-btn.ghost:hover{background:var(--brand-soft)}

/* --- Cartes ressources (hub) --- */
.hub-section{margin:32px 0}
.hub-section h2{font-size:1.25rem;margin:0 0 14px;color:var(--ink)}
.hub-grid{
  display:grid;gap:14px;
  grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
}
.hub-card{
  background:var(--surface);border:1px solid var(--line);border-radius:12px;
  padding:18px;display:block;color:var(--ink);
  transition:border-color .15s, transform .15s;
}
.hub-card:hover{border-color:var(--brand);text-decoration:none;transform:translateY(-1px)}
.hub-card .tag{
  font-size:.72rem;text-transform:uppercase;letter-spacing:.05em;
  color:var(--brand);font-weight:600;
}
.hub-card h3{margin:6px 0 6px;font-size:1.02rem}
.hub-card p{margin:0;font-size:.88rem;color:var(--muted)}

/* --- Footer ressources --- */
.res-foot{
  border-top:1px solid var(--line);background:var(--surface);
  padding:24px;margin-top:40px;
}
.res-foot-inner{
  max-width:var(--maxw);margin:0 auto;
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  font-size:.85rem;color:var(--muted);
}
.res-foot a{color:var(--muted)}
.res-foot a:hover{color:var(--brand)}

@media (max-width: 600px){
  .res-article h1{font-size:1.55rem}
  .res-nav-links{gap:10px;font-size:.85rem}
  .res-table{display:block;overflow-x:auto}
}