/* Modern styles */
:root{
  --bg: #f6f7fb;
  --card: #ffffff;
  --muted: #6b7280;
  --accent: #6b5cff; /* purple-blue */
  --glass: rgba(15,23,42,0.04);
  --max-width: 1100px;
}
*{box-sizing:border-box}
.body-fallback{}
body{font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Arial;color:#0f1724;background:var(--bg);margin:0;padding:28px;display:flex;justify-content:center}
.container{width:100%;max-width:var(--max-width)}
.topbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:22px}
.brand{display:flex;align-items:center;gap:12px}
.brand > div{display:flex;flex-direction:column}
.brand h1{margin:0;font-size:1.2rem}
.tagline{margin:4px 0 0;color:var(--muted)}
.logo{display:flex;align-items:center;justify-content:center;flex:0 0 48px}
.logo svg{width:48px;height:48px;display:block}
.actions{display:flex;align-items:center;gap:12px}
.lang-switch{background:transparent;padding:6px;border-radius:10px;display:flex;gap:6px}
.lang-btn{background:transparent;border:1px solid rgba(15,23,42,0.06);color:var(--muted);padding:6px 8px;border-radius:8px;cursor:pointer;text-decoration:none;display:inline-block;line-height:1.2}
.lang-btn.active{background:var(--accent);color:white;border-color:var(--accent);box-shadow:0 6px 18px rgba(107,92,255,0.12)}
.tabs{display:flex;gap:10px;margin:14px 0;flex-wrap:wrap}
.tab{background:var(--card);border:1px solid rgba(15,23,42,0.06);padding:10px 16px;border-radius:12px;cursor:pointer;color:var(--muted);box-shadow:0 1px 2px rgba(15,23,42,0.03)}
.tab.active{background:linear-gradient(90deg,var(--accent),#5b8bff);color:white;box-shadow:0 10px 30px rgba(107,92,255,0.12)}
.tags-row{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0}
.tag-btn{background:transparent;border:1px solid rgba(15,23,42,0.06);color:var(--muted);padding:6px 10px;border-radius:999px;cursor:pointer}
.tag-btn.active{background:rgba(107,92,255,0.10);border-color:var(--accent);color:var(--accent)}
.search-row{display:flex;justify-content:center;margin-bottom:16px}
#search-input{width:100%;max-width:640px;padding:10px 14px;border-radius:999px;border:1px solid rgba(15,23,42,0.06);background:var(--card);color:inherit}
.search-results{margin-bottom:14px}
.search-results .article-card{border-left:3px solid var(--accent)}
.content{display:grid;grid-template-columns:1fr;gap:14px}
.panel{background:var(--card);padding:22px;border-radius:12px;border:1px solid rgba(15,23,42,0.06);box-shadow:0 6px 24px rgba(15,23,42,0.04)}
.panel h2{margin-top:0}
.note{color:var(--muted);font-size:0.95rem}
.articles-list{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap:14px;
  align-items:start;
}
.article-card{
  background:var(--card);
  padding:16px;
  border-radius:12px;
  border:1px solid rgba(15,23,42,0.04);
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  transition:transform .14s ease, box-shadow .14s ease;
}
.article-card:hover{transform:translateY(-6px);box-shadow:0 12px 30px rgba(15,23,42,0.08)}
.article-card .cta{margin-top:10px;align-self:flex-start}
.article-card h3{margin:0 0 6px 0}
.site-footer{margin-top:18px;color:var(--muted);font-size:0.9rem}
@media (max-width:720px){body{padding:14px}.topbar{flex-direction:column;align-items:flex-start}.tabs{overflow:auto}}

/* Quote style under tagline */
.quote{font-style:italic;color:var(--muted);margin:8px 0 0;font-size:0.98rem}
.quote-author{font-weight:600;color:var(--muted);margin-left:8px;font-style:normal}

/* Contenu conservé dans le DOM pour le référencement (SEO) mais masqué visuellement */
.seo-content{
  position:absolute;
  width:1px;height:1px;
  padding:0;margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

/* Illustration du personnage qui réfléchit (pages article) */
.thinker-illustration{text-align:center;margin:18px 0 28px}
.thinker-illustration svg{width:180px;height:auto;display:inline-block}
.thinker-caption{color:var(--muted);font-style:italic;margin-top:6px}

/* Liste de questions / réponses */
.qa-list{display:flex;flex-direction:column;gap:14px;margin:18px 0}
.qa-item{background:var(--card);border:1px solid rgba(15,23,42,0.06);border-radius:12px;padding:14px 16px;box-shadow:0 2px 8px rgba(15,23,42,0.03)}
.qa-question{margin:0 0 8px;font-weight:700;color:#2b2140}
.qa-illustration{text-align:center;margin:12px 0 16px}
.qa-illustration svg{max-width:380px;width:100%;height:auto;display:inline-block}
.qa-illustration .bubble-left{animation:floatLeft 3s ease-in-out infinite alternate}
.qa-illustration .bubble-right{animation:floatRight 3s ease-in-out infinite alternate 1.5s}
@keyframes floatLeft{0%{transform:translateY(0)}100%{transform:translateY(-6px)}}
@keyframes floatRight{0%{transform:translateY(0)}100%{transform:translateY(-6px)}}
.qa-answer{margin:0;color:#374151}
.qa-example{margin:10px 0 0;padding:10px 12px;background:rgba(107,92,255,0.06);border-left:3px solid var(--accent);border-radius:6px;color:#2b2140;font-size:0.94rem}
.qa-example code{background:rgba(15,23,42,0.06);padding:1px 5px;border-radius:4px;font-size:0.9em}

/* Diagramme d'architecture exemple */
.arch-diagram{text-align:center;margin:22px 0}
.arch-diagram svg{width:100%;max-width:640px;height:auto}
.arch-caption{color:var(--muted);font-size:0.92rem;margin-top:8px}

/* Grands diagrammes d'architecture pleine largeur */
.arch-diagram-wide{width:100%;max-width:1080px;margin:22px auto;overflow-x:auto;text-align:center}
.arch-diagram-wide svg{width:100%;max-width:100%;min-width:760px;height:auto;display:block;margin:0 auto}

/* Grille des outils de conception / cadrage */
.tools-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(240px, 1fr));
  gap:14px;
  margin:18px 0;
}
.tool-card{
  background:var(--card);
  border:1px solid rgba(15,23,42,0.06);
  border-radius:12px;
  padding:14px 16px;
  box-shadow:0 2px 8px rgba(15,23,42,0.03);
  display:flex;
  flex-direction:column;
  gap:8px;
}
.tool-header{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:1.02rem;
  color:#2b2140;
}
.tool-icon{
  font-size:1.25rem;
}
.tool-desc{
  margin:0;
  font-size:0.92rem;
  color:#4b5563;
  line-height:1.45;
}