/* ==================================================
   VARIABLES & BASE
================================================== */
:root { --brand: #4a90e2; --brand-700: #3778c7; --on-brand: #fff; --bg: #ffffff; --text: #0f172a; --muted: #64748b; --shadow: 0 10px 30px rgba(2, 8, 20, 0.08); }
body { background-color: #f9f9f9; font-family: Arial, sans-serif; color: #333; padding-top: 64px;  }
.container { max-width: 1000px; margin: 20px auto; padding: 20px; }
@media (min-width: 1200px) { .container, .container-lg, .container-md, .container-sm, .container-xl { max-width: 1140px; } }
h1 { font-size: 2rem; font-weight: bold; }
.form-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.form-group label { font-weight: bold; color: #5e5e5e; }
.btn-primary { background-color: #4a90e2; border: none; font-size: 1.1rem; font-weight: bold; }
:root { --heading: #0f172a; }    						 /* clair */
html.dark { --heading: #eaf2ff; }						 /* sombre */
h1, h2, h3, h4, h5, h6 {  color: var(--heading);  }      /* tous les Hn suivent --heading */
.bg-light {  background-color: white  !important; /* gris très clair */}
/* Utils titres (accents ponctuels) */
.heading-accent { color: var(--brand) !important; } /* bleu volontaire */
.heading-muted  { color: var(--muted) !important; } /* ton doux */
.sq-ai-actions .sq-ai-btn{  border-radius: .25rem !important; /* ou la valeur que tu veux */}
/* ==================================================
   RESULTATS / SECTIONS
================================================== */
.result-section { border: 1px solid #ddd; padding: 20px; margin-top: 20px; border-radius: 8px; background-color: #fff; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); }
.result-section h2 { color: var(--brand);   font-weight: bold; font-size: 1.6rem; }
.result-section h3 {  font-size: 1.4rem; font-weight: bold; margin-bottom: 10px; }
.result-section h4 {  font-size: 1.2rem; }
.explanation { margin-bottom: 8px; font-size: 0.95rem; color: #5e5e5e; }
.text-danger { color: #d9534f; margin-left: 20px; }
.tools-link { font-size: 0.9rem; text-align: right; margin-top: 10px; }
.result-container { max-width: 1000px; margin: 20px auto; padding: 15px; background-color: #f8f9fa; border: 1px solid #dee2e6; border-radius: 5px; }
.sq-badge {  display: inline-block;  padding: .35rem .55rem;  margin: .1rem;  font-size: 0.85rem;  font-weight: 600;  border-radius: .35rem;  border: 1px solid var(--border, #ddd);  background: var(--surface-2, #f1f5f9);  color: var(--text, #0f172a);  text-decoration: none;}
.sq-badge:hover {  background: var(--surface, #e2e8f0);  text-decoration: none;}
.text-danger { color: var(--danger) !important; }
.text-success { color: var(--success) !important; }

/* ==================================================
   FAQ
================================================== */
.faq-item { margin-bottom: 30px; }
.faq-item p { margin: 0 20px; }

/* ==================================================
   SERP PREVIEW
================================================== */
.serp-preview { display: flex; max-width: 900px; font-family: Arial, sans-serif; margin-bottom: 20px; padding: 15px; border: 1px solid #ddd; border-radius: 5px; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); background-color: #fff; align-items: flex-start; }
.serp-content { flex: 1; }
.serp-logo-title { display: flex; align-items: center; gap: 10px; }
.serp-favicon { width: 32px; height: 32px; border-radius: 50%; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); }
.serp-url { font-size: 14px; color: #006621; font-family: Arial, sans-serif; text-decoration: none; display: block; margin-bottom: 5px; }
.serp-title { font-size: 18px; line-height: 1.3; color: #1a0dab; font-weight: normal; margin: 0; padding: 0; cursor: pointer; text-decoration: none; }
.serp-title:hover { text-decoration: underline; }
.serp-breadcrumbs { font-size: 13px; color: #006621; margin: 5px 0; }
.serp-description { font-size: 14px; color: #545454; line-height: 1.58; margin-top: 5px; }
.serp-meta { font-size: 12px; color: #70757a; margin-top: 10px; }
.serp-image-container { flex: 0 0 80px; margin-left: 15px; text-align: center; }
.serp-image { width: 80px; height: 80px; object-fit: cover; border-radius: 3px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); }

/* ==================================================
   FOOTER
================================================== */
.footer { background-color: #2c3e50; color: #ecf0f1; padding: 40px 0; }
.footer-content { display: flex; justify-content: space-between; flex-wrap: wrap; }
.footer-section { flex: 1; min-width: 200px; }
.footer-section h5 { color: #ecdbff; margin-bottom: 15px; }
.footer-links { list-style: none; padding: 0; }
.footer-links li { margin-bottom: 10px; }
.footer-links a { color: #ecf0f1; text-decoration: none; }
.footer-links a:hover { text-decoration: underline; }
.social-links { display: flex; gap: 15px; }
.social-links a { color: #ecf0f1; font-size: 1.5rem; }
.footer-bottom { text-align: center; margin-top: 20px; border-top: 1px solid #34495e; padding-top: 15px; }
.footer-bottom p { margin: 0; }

/* ==================================================
   TABLEAUX / KEYWORDS
================================================== */
.table-bordered thead th { background-color: #4a90e2; color: #fff; }
.keywords-section .table { width: 100%; }
.keywords-section .table-bordered th, .keywords-section .table-bordered td { text-align: right; }
.table-bordered tbody tr:nth-child(odd) { background-color: #f9f9f9; }
.table-bordered tbody tr:nth-child(even) { background-color: #fff; }
.table-bordered tbody tr:hover { background-color: #e8f4fc; }
/* Mobile card mode pour keywords */
@media (max-width: 768px) {
  .keywords-table { display: block; width: 100%; }
  .keywords-table thead { display: none; }
  .keywords-table tbody, .keywords-table tr, .keywords-table td { display: block; width: 100%; }
  .keywords-table td { padding: 10px 15px 10px 25% !important; border: none; border-bottom: 1px solid #ddd; position: relative; margin-bottom: 10px; }
  .keywords-table td:before { content: attr(data-label); position: absolute; left: 10px; font-weight: bold; color: #4a90e2; white-space: nowrap; }
  .keywords-table td:last-child { border-bottom: 0; }
  .hide-mobile { display: none !important; }
  .firstheader-mobile { font-weight: bold !important; background-color: #d7efff !important; }
}

/* ==================================================
   INTRO
================================================== */
.intro { display: flex; flex-wrap: wrap; align-items: flex-start; margin-bottom: 20px; }
.intro-content { overflow: hidden; }
.intro-text { flex: 1; padding-right: 20px; }
.intro-image { float: right; margin-left: 20px; margin-bottom: 10px; width: 40%; max-width: 400px; border-radius: 8px; }
@media (max-width: 768px) {
  .intro { flex-direction: column; }
  .intro-image { float: none; display: block; margin: 0 auto 15px auto; width: 100%; max-width: 100%; }
}

/* ==================================================
   DARK MODE
================================================== */
html.dark { --bg: #0b1220; --bg-2: #0f1629; --surface: #131c31; --surface-2: #0f1830; --border: #2b3960; --text: #eaeff7; --muted: #b9c5de; --brand: #4a90e2; --brand-700: #2b5ea8; --brand-800: #20497f; --success: #2ecc71; --warning: #f1c40f; --danger: #ff6b6b; --thead: #172644; --row-alt: rgba(255, 255, 255, 0.05); --link: #9cc7ff; --link-2: #cfe4ff; --url: #58b77c; }
html.dark body { background: var(--bg) !important; color: var(--text) !important; }
html.dark .container { color: var(--text) !important; }
html.dark a { color: var(--link) !important; }
html.dark a:hover { color: var(--link-2) !important; text-decoration: underline; }
html.dark .sq-header { background: linear-gradient(180deg, var(--brand-700), #1a2b55) !important; color: #fff; }
html.dark .sq-link { background: rgba(255, 255, 255, 0.1) !important; color: #eaf2ff !important; }
html.dark .sq-link:hover { background: rgba(255, 255, 255, 0.18) !important; }
html.dark .sq-link[aria-current="page"] { background: #eaf2ff !important; color: #173365 !important; }
html.dark .sq-btn { background: rgba(255, 255, 255, 0.12) !important; color: #fff !important; }
html.dark .sq-cta { background: #eaf2ff !important; color: #173365 !important; }
html.dark .sq-drawer::backdrop { background: rgba(0, 0, 0, 0.55); }
html.dark .sq-drawer__panel { background: var(--surface) !important; color: var(--text) !important; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6) !important; }
html.dark .sq-tool { background: var(--surface-2) !important; border-color: var(--border) !important; color: var(--text) !important; }
html.dark .sq-tool p { color: var(--muted) !important; }
html.dark .result-section, html.dark .serp-preview, html.dark .card, html.dark .modal-content, html.dark .dropdown-menu { background: var(--surface) !important; border-color: var(--border) !important; color: var(--text) !important; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35) !important; }
html.dark .explanation { color: var(--muted) !important; }
html.dark .serp-title { color: var(--link) !important; }
html.dark .serp-url { color: var(--url) !important; }
html.dark .serp-breadcrumbs { color: #8bd4a1 !important; }
html.dark .table { color: var(--text) !important; background: transparent !important; }
html.dark .table-bordered, html.dark .table-bordered th, html.dark .table-bordered td { border-color: var(--border) !important; }
html.dark .table-striped tbody tr:nth-of-type(odd) { background-color: var(--row-alt) !important; }
html.dark .table-hover tbody tr:hover { background-color: rgba(255, 255, 255, 0.15) !important; }
html.dark .table thead th { background: var(--thead) !important; color: #eaf2ff !important; border-color: var(--border) !important; }
html.dark .btn-primary { background: var(--brand) !important; border-color: var(--brand-800) !important; color: #fff !important; }
html.dark .btn-primary:hover { background: var(--brand-800) !important; }
html.dark .form-control, html.dark input[type="text"], html.dark input[type="email"], html.dark input[type="url"], html.dark select, html.dark textarea { background: var(--surface-2) !important; color: var(--text) !important; border-color: var(--border) !important; }
html.dark .form-control::placeholder { color: #9fb0ce !important; }
html.dark .alert { background: var(--surface) !important; border-left: 4px solid var(--border) !important; color: var(--text) !important; }
html.dark .alert-success { border-left-color: var(--success) !important; }
html.dark .alert-warning { border-left-color: var(--warning) !important; }
html.dark .alert-danger { border-left-color: var(--danger) !important; }
html.dark .text-danger { color: #ff8f8f !important; }
html.dark .tools-link { color: var(--link) !important; }
html.dark .footer { background: var(--bg-2) !important; color: var(--text) !important; }
html.dark .footer-links a { color: #dbe6ff !important; }
html.dark .footer-bottom { border-top-color: var(--border) !important; }
html.dark .sq-iconbtn { color: #fff !important; fill: currentColor; }
/* Unifie l’icône du CTA compte avec la couleur du texte du bouton */
.sq-cta .icon-user {  color: currentColor !important;  fill: currentColor !important; /* car le SVG utilise fill="currentColor" */}

/* Caret bootstrap (triangle) doit suivre la couleur aussi */
.dropdown-toggle.sq-cta::after {  border-top-color: currentColor !important;}
/* États hover/focus harmonisés */
.sq-cta:hover { text-decoration: none; filter: brightness(0.97); }
.sq-cta:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }

/* En dark, ton CTA a un fond clair (#eaf2ff) + texte sombre (#173365) :
   on renforce le :hover pour garder un contraste propre */
html.dark .sq-cta:hover { background: #d8e6ff !important; color: #102a56 !important; }


html.dark :focus-visible { outline: 2px solid #ffd166; outline-offset: 2px; border-radius: 4px; }
html.dark body, html.dark .result-container { background: var(--bg-2) !important; }
html.dark .table-bordered tbody tr:nth-child(odd) { background-color: var(--row-alt) !important; }
html.dark .table-bordered tbody tr:nth-child(even) { background-color: transparent !important; }
html.dark input:disabled, html.dark select:disabled, html.dark textarea:disabled { background: var(--surface) !important; color: var(--muted) !important; border-color: var(--border) !important; }
html.dark ::placeholder { color: var(--muted) !important; }
html.dark progress::-webkit-progress-bar { background-color: var(--surface-2) !important; }
html.dark body, html.dark .result-section, html.dark .serp-preview, html.dark .sq-tool, html.dark .footer { transition: background-color 0.3s ease, color 0.3s ease; }
html.dark .footer-links a:hover { color: var(--link-2) !important; }
html.dark .dropdown-menu .dropdown-item { color: var(--text) !important; }
html.dark .badge.bg-secondary-subtle {   background:#2b3960 !important;   border-color:#3d4d70 !important;   color:#eaf2ff !important; }
html.dark .dropdown-menu .dropdown-item:hover,
html.dark .dropdown-menu .dropdown-item:focus {
  background: var(--surface-2) !important; /* fond légèrement contrasté */
  color: var(--text) !important;           /* texte lisible */
}
html.dark .dropdown-menu .dropdown-item.text-danger:hover {  color: var(--danger) !important;}
html.dark .dropdown-menu .dropdown-item.text-success:hover {  color: var(--success) !important;}

html.dark input,html.dark select,html.dark textarea,html.dark button {  background: var(--surface-2) !important;  color: var(--text) !important;  border-color: var(--border) !important;}
/* Dropdown items lisibles en dark mode */
.spark-bar {  display:inline-block;  width:8px;  margin-right:3px;  border-radius:2px;  vertical-align:baseline;  background: var(--surface-2, #dee2e6);}
html.dark .spark-bar {  background: var(--border, #3d4d70);}
/* ==================================================
   DARK MODE : Ajustements article
================================================== */
html.dark header.article-header .kicker { color: var(--muted) !important; }
html.dark .note   { background: var(--surface-2) !important; border-color: var(--border) !important; color: var(--text) !important; }
html.dark .protip { background: rgba(66, 153, 225, 0.12) !important; border-color: var(--brand) !important; color: var(--text) !important; }
html.dark .danger { background: rgba(220, 38, 38, 0.12) !important; border-color: var(--danger) !important; color: var(--text) !important; }
html.dark .toc    { background: var(--surface) !important; border-color: var(--border) !important; }
html.dark .toc a  { color: var(--link) !important; }
html.dark figcaption { color: var(--muted) !important; }
html.dark table, html.dark th, html.dark td { border-color: var(--border) !important; }
html.dark th { background: var(--surface-2) !important; }
/* Coming soon : harmonisé avec la charte existante */
.coming-soon-list {  display: grid;  gap: 1rem;}
.coming-item {  background: var(--surface);  border: 1px solid var(--border);  padding: 1rem;  border-radius: var(--radius, 10px);   color: var(--text);}
html.dark .coming-item {  background: var(--surface-2);  border-color: var(--border);}
/* ============================================
   Pagination harmonisée avec ton design
============================================ */
/* Pagination – contraste fort en dark mode */
html.dark .pagination .page-link {  background: var(--surface);  border: 1px solid var(--border);  color: #fff !important; /* blanc pur pour contraste max */}
html.dark .pagination .page-link:hover {  background: var(--surface-2);  color: var(--link-hover) !important;}
html.dark .pagination .page-item.active .page-link {  background: var(--link);  border-color: var(--link);  color: #fff !important; /* actif = blanc sur couleur vive */}
html.dark .pagination .page-item.disabled .page-link {  background: var(--surface-2);  color: var(--muted) !important;}


/* ==================================================
   DARK MODE : FAQ
================================================== */
html.dark .faq details {  background: var(--surface) !important;  border-color: var(--border) !important;  color: var(--text) !important;}
html.dark .faq summary {  color: var(--heading) !important;}html.dark .faq details[open] {  background: var(--surface-2) !important;}
html.dark .faq details p {  color: var(--text) !important;}
/* ==================================================
   DARK MODE : Fallback génériques (Bootstrap-like)
================================================== */
html.dark .bg-light, html.dark .bg-white { background-color: var(--surface) !important; color: var(--text) !important; }
html.dark .border { border-color: var(--border) !important; }
html.dark .text-muted, html.dark .small.text-muted { color: var(--muted) !important; }
html.dark .progress { background-color: var(--surface-2) !important; }
html.dark .progress-bar.bg-success { background-color: var(--success) !important; }
html.dark .progress-bar.bg-info { background-color: var(--link) !important; }
html.dark .progress-bar.bg-primary { background-color: var(--brand) !important; }
html.dark .progress-bar.bg-warning { background-color: var(--warning) !important; }
html.dark .progress-bar.bg-danger { background-color: var(--danger) !important; }


/* ==================================================
   HEADER / NAVIGATION
================================================== */
.sq-header {  position: fixed;   top: 0; left: 0; right: 0;  z-index: 1100; background: linear-gradient(180deg, var(--brand), var(--brand-700)); color: var(--on-brand); }
.sq-row { display: flex; align-items: center; gap: 0.6rem; padding: 0.5rem 0.75rem; white-space: nowrap; overflow: hidden; }
.sq-logo { display: inline-flex; align-items: center; gap: 0.5rem; color: #fff; text-decoration: none; }
.sq-logo:hover { color: #fff; text-decoration: none; }
.sq-quick { display: flex; gap: 0.25rem; margin-left: 0.6rem; overflow: hidden; scrollbar-width: thin; flex: 1; }
.sq-link { color: #fff; text-decoration: none; padding: 0.28rem 0.65rem; background: rgba(255, 255, 255, 0.14); }
.sq-link:hover { background: rgba(255, 255, 255, 0.2); text-decoration: none; }
.sq-link[aria-current="page"] { background: #fff; color: var(--brand); }
.sq-btn { display: inline-flex; align-items: center; gap: 0.45rem; border: 0; background: rgba(255, 255, 255, 0.16); color: #fff; padding: 0.38rem 0.7rem; cursor: pointer; margin-left: 0.4rem; flex: 0 0 auto; }
.sq-btn:hover { background: rgba(255, 255, 255, 0.22); }
.sq-actions { margin-left: auto; display: flex; align-items: center; gap: 0.5rem; }
.sq-cta { background: #fff; color: var(--brand); padding: 0.38rem 0.75rem; text-decoration: none; font-weight: 700; }
.icon-user { display: inline-block; vertical-align: middle; }
/* Header collé en haut, sans changer le style visuel */
/* Variante FIXE (à activer seulement si tu veux du "fixed") */




/* ==================================================
   DRAWER
================================================== */
.sq-drawer { border: 0; margin: 0; padding: 0; width: 100vw; max-width: 100vw; background: transparent; }
.sq-drawer::backdrop { background: rgba(2, 8, 20, 0.45); backdrop-filter: blur(2px); }
.sq-drawer__panel { position: fixed; right: 0; top: 0; height: 100vh; width: min(520px, 92vw); background: var(--bg); color: var(--text); box-shadow: var(--shadow); display: flex; flex-direction: column; padding: 0.9rem; gap: 0.8rem; }
.sq-drawer__head { display: flex; align-items: center; gap: 0.6rem; }
#sqToolsSearch { flex: 1; border: 1px solid rgba(100, 116, 139, 0.25); padding: 0.6rem 0.75rem; border-radius: 0.6rem; background: rgba(255, 255, 255, 0.9); color: #0f172a; }
@media (prefers-color-scheme: dark) { #sqToolsSearch { background: rgba(17, 24, 39, 0.7); color: var(--text); border-color: rgba(148, 163, 184, 0.25); } }
.sq-iconbtn { background: transparent; border: 0; padding: 0.45rem; border-radius: 0.6rem; cursor: pointer; }
.sq-drawer__list { display: flex; flex-direction: column; gap: 1rem; overflow: auto; padding-right: 0.2rem; padding-bottom: 3.5rem; }
@media (min-width: 540px) { .sq-drawer__list { grid-template-columns: 1fr 1fr; } }
.sq-tool { display: block; text-decoration: none; border: 1px solid rgba(148, 163, 184, 0.25); border-radius: 0.75rem; padding: 0.75rem 0.8rem; color: var(--text); }
.sq-tool h3 { margin: 0 0 0.25rem 0; font-size: 0.98rem; font-weight: 800; }
.sq-tool p { margin: 0; color: var(--muted); font-size: 0.9rem; }
.sq-category-block { border-top: 1px solid rgba(148, 163, 184, 0.25); padding-top: 0.6rem; }
.sq-category-tools { display: grid; grid-template-columns: 1fr; gap: 0.45rem; }
@media (min-width: 768px) { .sq-category-tools { grid-template-columns: 1fr 1fr; } }

/* ==================================================
   RESPONSIVE
================================================== */
@media (max-width: 768px) {  .form-row { flex-direction: column; }  .container { max-width: 100%; }  .tools-link { text-align: left; }  .sq-cta .cta-text { display: none; }  .sq-quick { display: none; }}
@media (prefers-color-scheme: light) { .sq-iconbtn { color: #000 !important; } }
/*  Article sur 2 colonne sur tablet */
@media (min-width: 576px) and (max-width: 991px) {  .list-unstyled.row > li { flex: 0 0 50%; max-width: 50%; }}


/* ==================================================
   Harmonisation globale des éléments de formulaire
================================================== */
input[type="checkbox"], input[type="radio"] { accent-color: var(--brand); }
.form-check-input:checked { background-color: var(--brand) !important; border-color: var(--brand) !important; }
input[type="range"] { accent-color: var(--brand); }
input[type="range"]::-webkit-slider-thumb { background-color: var(--brand); }
input[type="range"]::-moz-range-thumb { background-color: var(--brand); }
input[type="range"]::-ms-thumb { background-color: var(--brand); }
progress { accent-color: var(--brand); }
progress::-webkit-progress-bar { background-color: #eee; border-radius: 4px; }
progress::-webkit-progress-value { background-color: var(--brand); border-radius: 4px; }
progress::-moz-progress-bar { background-color: var(--brand); border-radius: 4px; }
input:focus, select:focus, textarea:focus { border-color: var(--brand) !important; box-shadow: 0 0 0 0.2rem rgba(74, 144, 226, 0.25) !important; }
.dropdown-menu .dropdown-item { display: block; width: 100%; padding: 0.75rem 1rem; text-align: left; }
#sq-header, #sq-header .sq-row, #sq-header .sq-actions, #sq-header .dropdown { overflow: visible !important; }
#sq-header .dropdown-menu { z-index: 1060; right: 0; }
html, body { overflow-x: hidden; }
#sq-header .sq-row { flex-wrap: wrap; }
.sq-drawer { max-width: 100vw; overflow-x: hidden; }
.sq-drawer__head { display: flex; align-items: center; justify-content: space-between; }
.sq-head-actions { display: flex; gap: 0.5rem; }



/* ==================================================
   STYLE ARTICLE GLOBAL (non scopé)
================================================== */
:root { --c1: #0d47a1; --c2: #0ea5e9; --article-text: #101828; --article-muted: #475467; --article-bd: #e5e7eb; }
header.article-header { margin: 24px 0 16px; }
header.article-header .kicker { color: var(--article-muted); font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; margin: 0 0 6px; }
header.article-header h1 { font-size: clamp(28px, 4vw, 40px); line-height: 1.2; margin: 8px 0 10px; color: var(--heading); }
figure { margin: 24px auto; text-align: center; }
figure img { max-width: 100%; height: auto; border-radius: 12px; }
figcaption { color: var(--article-muted); font-size: 0.95rem; margin-top: 8px; }
.cta { display: inline-block; background: var(--c1); color: #fff; padding: 12px 18px; border-radius: 12px; text-decoration: none; font-weight: 700; }
.cta:hover { background: #0b3d90; }
.note, .protip, .danger { border-radius: 12px; padding: 14px 16px; margin: 18px 0; border: 1px solid var(--article-bd); }
.note { background: #f8fafc; }
.protip { background: #eff6ff; border-color: #bfdbfe; }
.danger { background: #fff1f2; border-color: #fecdd3; }
.toc { background: #f1f5f9; border: 1px solid var(--article-bd); border-radius: 12px; padding: 16px; }
.toc a { color: var(--c1); text-decoration: none; }
.toc a:hover { text-decoration: underline; }
h2 { margin-top: 42px; font-size: clamp(22px, 3.3vw, 32px); }
h3 { margin-top: 28px; font-size: clamp(18px, 2.5vw, 24px); }
ul { padding-left: 22px; }
.codeblock { background: #0f172a; color: #e2e8f0; padding: 0px; border-radius: 12px; overflow: auto; font-family: ui-monospace, Menlo, Consolas, monospace; white-space: pre-wrap; }
table { width: 100%; border-collapse: collapse; margin: 16px 0; border: 1px solid var(--article-bd); }
th, td { border: 1px solid var(--article-bd); padding: 10px; text-align: left; vertical-align: top; }
th { background: #f8fafc; }
.grid { display: grid; gap: 16px; }
@media (min-width: 820px) { .grid-2 { grid-template-columns: 1fr 1fr; } }
footer.article-footer { margin: 40px 0 8px; color: var(--article-muted); font-size: 0.95rem; }
.faq details { background: #f8fafc; border: 1px solid var(--article-bd); border-radius: 12px; padding: 12px; margin: 10px 0; }
.faq summary { cursor: pointer; font-weight: 700; }
.footer h3,h4 {    color: #a5d2ff; /* Rose vif */    /* ou une autre nuance de rose selon ta charte */}




/* =======================
   TOKENS (1 seule fois)
======================= */
:root{
  /* Badges */
  --b-hi:#dc3545;--b-md:#fd7e14;--b-lo:#6c757d;

  /* AI Wait (valeurs par défaut identiques à ton code) */
  --ai-bd:#e9ecef;--ai-bg:#fff;--ai-tx:#0f172a;--ai-hd:var(--ai-tx);--ai-mu:#64748b;
  --ai-s2:#f1f5f9;--ai-rail:rgba(148,163,184,.22);--ai-pill:rgba(148,163,184,.28);
  --ai-ring:rgba(148,163,184,.35);--ai-brand:#4a90e2;--ai-brand2:#3778c7;
}

/* =======================
   Badges priorité mots-clés IA
======================= */
.sw-badge{
  display:inline-block;padding:.25em .6em;border-radius:.4rem;
  font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.03em;color:#fff
}
.sw-badge-high{background:var(--b-hi)}
.sw-badge-medium{background:var(--b-md)}
.sw-badge-low{background:var(--b-lo)}

.sw-intent{
  font-size:.75rem;padding:.25em .55em;border-radius:.35rem;
  background:#e9ecef;color:#212529;text-transform:capitalize
}

/* =======================
   AI Wait UI (loader + richesse estimée)
======================= */
.aiwait{
  border:1px solid var(--border,var(--ai-bd));
  border-radius:12px;padding:12px 14px;
  background:var(--surface,var(--ai-bg));
  color:var(--text,var(--ai-tx));
  box-shadow:0 6px 18px rgba(2,8,20,.06) /* Commentaire: léger, discret */
}
.aiwait-top{display:flex;align-items:center;gap:10px}
.aiwait-title{font-weight:800;letter-spacing:.01em;color:var(--heading,var(--ai-hd))}
.aiwait-sub{margin-top:6px;font-size:13px;line-height:1.4;color:var(--muted,var(--ai-mu))}

.aiwait-spinner{
  width:18px;height:18px;border-radius:50%;
  border:3px solid var(--ai-ring);border-top-color:var(--brand,var(--ai-brand));
  animation:aiwaitSpin .8s linear infinite
}
@keyframes aiwaitSpin{to{transform:rotate(360deg)}}

.aiwait-bar-wrap{
  margin-top:10px;height:10px;overflow:hidden;border-radius:999px;
  background:var(--ai-rail);border:1px solid var(--ai-rail) /* Commentaire: rail sobre */
}
.aiwait-bar{
  height:10px;width:0%;border-radius:999px;transition:width 600ms ease;
  background:linear-gradient(90deg,var(--brand,var(--ai-brand)),var(--brand-700,var(--ai-brand2)))
}

.aiwait-meta{margin-top:8px;display:flex;gap:10px;flex-wrap:wrap;font-size:12px;color:var(--muted,var(--ai-mu))}
.aiwait-pill{
  border:1px solid var(--ai-pill);padding:2px 8px;border-radius:999px;
  background:var(--surface-2,var(--ai-s2));color:var(--text,var(--ai-tx))
}

/* =======================
   Dark mode (ciblé, court)
======================= */
html.dark .aiwait{
  background:var(--surface-2,#0f1830);
  border-color:var(--border,#2b3960);
  box-shadow:0 10px 26px rgba(0,0,0,.45) /* Commentaire: profondeur dark */
}
html.dark .aiwait-bar-wrap{background:rgba(43,57,96,.55);border-color:rgba(43,57,96,.85)}
html.dark .aiwait-pill{background:var(--surface,#131c31);border-color:rgba(43,57,96,.95);color:var(--text,#eaeff7)}
html.dark .aiwait-spinner{border-color:rgba(185,197,222,.25);border-top-color:var(--brand,var(--ai-brand))}

/* =======================
   TOKENS (1 seule fois)
======================= */
:root{
  --p:#ff2fb9;--v:#b026ff;
  --grad:linear-gradient(135deg,var(--p),var(--v));
  --sh-btn:0 14px 32px rgba(255,47,185,.45),0 0 18px rgba(176,38,255,.38),0 0 0 1px rgba(255,255,255,.12) inset;
  --sh-btn-h:0 20px 44px rgba(255,47,185,.65),0 0 26px rgba(176,38,255,.55),0 0 0 1px rgba(255,255,255,.18) inset;
  --sh-btn-d:0 18px 38px rgba(255,47,185,.55),0 0 22px rgba(176,38,255,.45),0 0 0 1px rgba(255,255,255,.16) inset;
  --sh-cta:0 8px 22px rgba(255,47,185,.45),0 0 14px rgba(176,38,255,.35);
  --up-bg:linear-gradient(135deg,rgba(255,47,185,.08),rgba(176,38,255,.08));
  --up-bg-d:linear-gradient(135deg,rgba(255,47,185,.14),rgba(176,38,255,.14));
}

/* =======================
   ACTIONS IA
======================= */
.sq-ai-actions{display:flex;justify-content:center;align-items:center;margin:18px 0 12px}
.sq-ai-btn{
  display:inline-flex;align-items:center;gap:.55rem;margin:6px auto;
  padding:.85rem 1.35rem;border-radius:14px;border:0;cursor:pointer;text-decoration:none;
  font-size:.95rem;font-weight:800;letter-spacing:.02em;color:#fff;background:var(--grad);
  white-space:nowrap;box-shadow:var(--sh-btn);
  transition:transform .25s ease,box-shadow .25s ease,filter .25s ease
}
.sq-ai-btn:hover{transform:translateY(-2px) scale(1.01);filter:brightness(1.08);box-shadow:var(--sh-btn-h)}
.sq-ai-btn:active{transform:translateY(0) scale(.99);filter:brightness(.98)}
.sq-ai-btn:focus-visible{outline:2px solid #ffd6f2;outline-offset:3px}
.sq-ai-btn .ai-icon{font-size:1.05rem;line-height:1}
.sq-ai-btn .ai-sub{font-size:.75rem;font-weight:600;opacity:.85}

.sq-ai-btn{  display: flex;  flex-direction: column;  align-items: flex-start;  gap: .2rem;  text-align: left;     /* évite un centrage Bootstrap selon contexte */  white-space: normal;  /* autorise le retour à la ligne */}
.sq-ai-btn-sub{  display:block;  font-size: .78rem;  line-height: 1.25;  font-weight: 500;  opacity: .85;}

/* =======================
   UPSELL IA
======================= */
.sq-ai-upsell{display:flex;justify-content:center;margin:18px 0 10px}
.sq-ai-upsell-inner{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;row-gap:10px;
  padding:14px 18px;max-width:680px;width:100%;border-radius:14px;
  background:var(--up-bg);border:1px dashed rgba(255,47,185,.45)
}
.sq-ai-upsell-lock{font-size:1.4rem;line-height:1;opacity:.85}
.sq-ai-upsell-text{flex:1;min-width:0;font-size:.9rem;line-height:1.4}
.sq-ai-upsell-text strong{display:block;font-size:.95rem;margin-bottom:2px;color:#212529}
.sq-ai-upsell-text span{color:#495057;font-size:.82rem}
.sq-ai-upsell-cta{
  flex:0 0 auto;padding:.55rem .9rem;border-radius:10px;
  font-size:.85rem;font-weight:800;text-decoration:none;color:#fff;background:var(--grad);
  box-shadow:var(--sh-cta);transition:transform .2s ease,filter .2s ease
}
.sq-ai-upsell-cta:hover{transform:translateY(-1px);filter:brightness(1.08)}

/* =======================
   DARK MODE (ultra court)
======================= */
html.dark .sq-ai-btn{box-shadow:var(--sh-btn-d)}
html.dark .sq-ai-upsell-inner{background:var(--up-bg-d);border-color:rgba(255,47,185,.6)}
html.dark .sq-ai-upsell-text strong{color:#eaf2ff}
html.dark .sq-ai-upsell-text span{color:#b9c5de}

/* =======================
   MOBILE FIX (inchangé visuellement)
======================= */
.sq-ai-btn{white-space:normal;text-align:left;max-width:100%;line-height:1.2}
#generateMetaTagsBtn .sq-ai-btn-sub{display:block;font-size:.78rem;font-weight:600;opacity:.9;margin-top:.25rem}

@media (max-width:576px){
  .sq-ai-actions,.sq-ai-upsell{padding:0 12px}
  .sq-ai-btn{width:100%;justify-content:flex-start;padding:.9rem 1rem;border-radius:16px;gap:.5rem}
  .sq-ai-upsell-inner{flex-direction:column;align-items:stretch;gap:10px;padding:14px}
  .sq-ai-upsell-lock{font-size:1.25rem}
  .sq-ai-upsell-text span{display:block;font-size:.85rem;line-height:1.35}
  .sq-ai-upsell-cta{width:100%;text-align:center;padding:.75rem .9rem;border-radius:12px}
}
@media (min-width:577px){.sq-ai-btn{max-width:720px}}