/* ═════════════════════════════════════════════════
   ATARAXIA SEO — style.css v1.4 — 29.06.2026
   Sprint 21-A : ajout composants page tarifs
   Sprint 21-B (accessibilité WCAG AA) :
     - hero-eyebrow : accent → blanc 0.9 (contraste)
     - section-eyebrow : --accent-wcag #8B4020 sur fond blanc (ratio 5.8:1)
       --accent bumped #B35C38→#A8542F (21.07.2026, ratio 5.10:1 WCAG AA)
     - metric-label, hero-sub, footer : opacités renforcées
   ═════════════════════════════════════════════════ */

/* ─── Polices ────────────────────────────────── */
@font-face {
  font-family: 'DM Sans';
  src: url('/fonts/DMSans-9ptRegular.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'DM Sans';
  src: url('/fonts/DMSans-9ptItalic.woff2') format('woff2');
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'DM Sans';
  src: url('/fonts/DMSans-Bold.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}

/* ─── Reset ──────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ─── Variables ──────────────────────── */
:root {
  --noir:       #0D0D0D;
  --noir-doux:  #1A1A1A;
  --gris-fonce: #333333;
  --gris:       #767676;
  --gris-clair: #E5E5E5;
  --fond:       #FAFAFA;
  --blanc:      #FFFFFF;
  --accent:     #A8542F;    /* WCAG AA : ratio 5.10:1 sur blanc — bumped from #B35C38 (4.47) 21.07.2026 */
  --accent-wcag: #8B4020;   /* accent renforcé textes normaux fond blanc — ratio 5.8:1 WCAG AA */
  --accent-clair: rgba(168, 84, 47, 0.12);
  --max-width:  1200px;
  --esp:        1.5rem;
}

/* ─── Base ────────────────────────────── */
html { font-size: 16px; scroll-behavior: smooth; }
body {
  font-family: 'DM Sans', sans-serif;
  font-weight: 400;
  color: var(--gris-fonce);
  background: var(--fond);
  line-height: 1.65;
}

/* ─── Focus clavier (DT-13) ───────────────────── */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 2px;
}
header a:focus-visible,
header button:focus-visible,
footer a:focus-visible,
.atx-cookie a:focus-visible,
.atx-cookie button:focus-visible {
  outline-color: #ffffff;
}

/* ─── Skip nav ────────────────────────── */
.skip-nav {
  position: absolute; top: -40px; left: 0;
  background: var(--accent); color: var(--blanc);
  padding: 8px 16px; z-index: 200; font-size: 0.9rem;
  transition: top 0.2s;
}
.skip-nav:focus { top: 0; }

/* ─── Header ─────────────────────────── */
header {
  position: sticky; top: 0; z-index: 100;
  background: var(--noir-doux);
  border-bottom: 1px solid rgba(255,255,255,0.08);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--esp);
  height: 64px;
  max-width: 100%;
}
.logo { text-decoration: none; display: flex; align-items: baseline; gap: 0; color: var(--blanc); } /* UI-01 fix : evite heritage bleu navigateur */
.logo-ataraxia {
  font-size: 1.25rem; font-weight: 700;
  color: var(--blanc); letter-spacing: -0.02em;
}
.logo-seo {
  font-size: 1.25rem; font-weight: 700;
  color: var(--accent); letter-spacing: -0.02em;
}
/* ── Badge BÊTA (Sprint 22) ──────────────────────────────────────────────── */
.badge-beta {
  display: inline-flex; align-items: center;
  background: var(--accent); color: var(--blanc);
  font-size: 0.6rem; font-weight: 800;
  letter-spacing: 0.12em; text-transform: uppercase;
  padding: 0.2rem 0.45rem; border-radius: 4px;
  margin-left: 0.5rem;
  vertical-align: middle;
  position: relative; top: -2px;
  flex-shrink: 0;
}
nav {
  display: flex; align-items: center; gap: 2rem;
}
nav a {
  color: rgba(255,255,255,0.85); /* renforcé : 0.75 → 0.85 pour WCAG AA */
  text-decoration: none;
  font-size: 0.9rem;
  letter-spacing: 0.03em;
  transition: color 0.2s;
}
nav a:hover { color: var(--blanc); }
#nav-auth { display: contents; }
.nav-cta {
  background: var(--accent) !important;
  color: var(--blanc) !important;
  padding: 0.5rem 1.25rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  transition: opacity 0.2s !important;
}
.nav-cta:hover { opacity: 0.85 !important; }
.nav-toggle {
  display: none; background: none; border: none;
  cursor: pointer; padding: 0.5rem;
  flex-direction: column; gap: 5px;
}
.nav-toggle span {
  display: block; width: 24px; height: 2px;
  background: var(--blanc); border-radius: 2px;
}

/* ─── Conteneur principal ──────────────────── */
main { min-height: 60vh; }
.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--esp);
}

/* ─── Hero ────────────────────────────── */
.hero {
  background: var(--noir-doux);
  color: var(--blanc);
  padding: 6rem var(--esp) 5rem;
}
.hero-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
}
.hero-eyebrow {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.9); /* WCAG : accent #B35C38 sur #1A1A1A insuffisant → blanc 0.9 */
  margin-bottom: 1.25rem;
}
.hero h1 {
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.15;
  color: var(--blanc);
  margin-bottom: 1.5rem;
}
.hero h1 em { font-style: normal; color: var(--accent); }
.hero-sub {
  font-size: 1.1rem;
  color: rgba(255,255,255,0.85); /* WCAG : 0.7 → 0.85 */
  margin-bottom: 2.5rem;
  max-width: 480px;
  line-height: 1.7;
}
.hero-actions { display: flex; gap: 1rem; flex-wrap: wrap; }
.hero-metrics {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
}
.metric-card {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  padding: 1.5rem;
  border-radius: 4px;
}
.metric-value {
  font-size: 2.5rem;
  font-weight: 700;
  color: var(--accent);
  letter-spacing: -0.04em;
  line-height: 1;
  margin-bottom: 0.4rem;
}
.metric-label {
  font-size: 0.8rem;
  color: rgba(255,255,255,0.75); /* WCAG : 0.55 → 0.75 */
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

/* ─── Boutons ─────────────────────────── */
.btn {
  display: inline-block;
  padding: 0.8rem 2rem;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-decoration: none;
  cursor: pointer;
  border: none;
  transition: opacity 0.2s, transform 0.1s;
}
.btn:hover { opacity: 0.85; }
.btn:active { transform: scale(0.98); }
.btn:disabled, .btn[disabled] { opacity: 0.45; cursor: not-allowed; pointer-events: none; }
.btn-primary {
  background: var(--accent);
  color: var(--blanc);
}
.btn-primary:hover { opacity: 0.85; }
.btn-secondary {
  background: transparent;
  color: var(--accent);
  border: 1.5px solid var(--accent);
  transition: background 0.2s, color 0.2s;
}
.btn-secondary:hover { background: var(--accent); color: var(--blanc); }
.btn-outline {
  background: transparent;
  color: var(--blanc);
  border: 1px solid rgba(255,255,255,0.4);
}
.btn-outline:hover { border-color: var(--blanc); }
.btn-dark { background: var(--noir-doux); color: var(--blanc); }
/* ── Message bêta page tarifs ───────────────────────────────────────────── */
.tarif-beta-msg {
  max-width: 860px; margin: 0 auto 1.5rem; padding: 1rem 1.5rem;
  background: #f5ebe5; border: 1px solid #d4956a; border-radius: 8px;
  color: #7a3a1e; font-size: 0.9rem; line-height: 1.5;
}
/* ── Badge bêta dashboard upgrade ───────────────────────────────────────── */
.dash-upgrade-beta {
  font-size: 0.85rem; color: var(--gris-fonce);
  background: #f5ebe5; border: 1px solid #d4956a;
  border-radius: 6px; padding: 0.6rem 1rem;
  margin-top: 0.5rem;
}
.dash-upgrade-beta a { color: var(--accent); }

/* ─── Sections génériques ─────────────────── */
section { padding: 5rem var(--esp); }
section.alt { background: var(--blanc); }
.section-inner {
  max-width: var(--max-width);
  margin: 0 auto;
}
.section-eyebrow {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--accent-wcag); /* WCAG : #B35C38 → #8B4020 sur fond blanc, ratio 4.6:1 */
  margin-bottom: 1rem;
}
.section-title {
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--noir-doux);
  margin-bottom: 1rem;
  line-height: 1.2;
}
.section-sub {
  font-size: 1.05rem;
  color: var(--gris);
  max-width: 560px;
  margin-bottom: 3rem;
  line-height: 1.7;
}

/* ─── Grille 3 colonnes ────────────────── */
.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}
.card {
  background: var(--fond);
  border: 1px solid var(--gris-clair);
  padding: 2rem;
  border-radius: 4px;
}
.card-icon { font-size: 1.5rem; margin-bottom: 1rem; color: var(--accent); }
.card h3 {
  font-size: 1rem;
  font-weight: 700;
  color: var(--noir-doux);
  margin-bottom: 0.5rem;
}
.card p { font-size: 0.9rem; color: var(--gris); line-height: 1.6; }

/* ─── Tarifs — composants existants ─────────── */
.grid-tarifs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  align-items: start;
}
.tarif-card {
  border: 1px solid var(--gris-clair);
  border-radius: 4px;
  overflow: hidden;
  background: var(--blanc);
  position: relative;
}
.tarif-card.featured {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent);
}
.tarif-header {
  padding: 2rem 2rem 1.5rem;
  border-bottom: 1px solid var(--gris-clair);
}
.tarif-card.featured .tarif-header {
  background: var(--accent);
  color: var(--blanc);
  border-bottom-color: transparent;
}
.tarif-niveau {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent-wcag); /* WCAG sur fond blanc */
  margin-bottom: 0.5rem;
}
.tarif-card.featured .tarif-niveau { color: rgba(255,255,255,0.9); }
.tarif-prix {
  font-size: 2.5rem;
  font-weight: 700;
  letter-spacing: -0.04em;
  color: var(--noir-doux);
  line-height: 1;
}
.tarif-card.featured .tarif-prix { color: var(--blanc); }
.tarif-prix span {
  font-size: 1rem;
  font-weight: 400;
  color: var(--gris);
}
.tarif-card.featured .tarif-prix span { color: rgba(255,255,255,0.85); }
.tarif-body { padding: 1.5rem 2rem 2rem; }
.tarif-features {
  list-style: none;
  margin-bottom: 2rem;
}
.tarif-features li {
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--gris-clair);
  font-size: 0.9rem;
  color: var(--gris-fonce);
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
}
.tarif-features li::before {
  content: '✓';
  color: var(--accent-wcag);
  font-weight: 700;
  flex-shrink: 0;
}

/* ─── Tarifs — nouveaux composants Sprint 21 ─ */
.grid-tarifs-4 {
  grid-template-columns: repeat(4, 1fr);
}
.tarif-badge {
  position: absolute;
  top: -1px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--accent);
  color: var(--blanc);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.25rem 0.9rem;
  border-radius: 0 0 4px 4px;
  white-space: nowrap;
}
.tarif-persona {
  font-size: 0.8rem;
  color: var(--gris);
  margin-top: 0.6rem;
  line-height: 1.4;
}
.tarif-card.featured .tarif-persona { color: rgba(255,255,255,0.85); }
.tarif-sous-prix {
  font-size: 0.85rem; /* UI-10 fix : prix annuel plus lisible */
  color: var(--gris);
  margin-top: 0.25rem;
}
.tarif-card.featured .tarif-sous-prix { color: rgba(255,255,255,0.85); }
.tarifs-toggle-wrap {
  display: inline-flex;
  border: 1px solid var(--gris-clair);
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 0.75rem;
}
.tarifs-toggle-btn {
  background: var(--blanc);
  border: none;
  padding: 0.6rem 1.5rem;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--gris);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  transition: background 0.15s, color 0.15s;
}
.tarifs-toggle-btn.active {
  background: var(--noir-doux);
  color: var(--blanc);
}
.tarifs-toggle-badge {
  background: rgba(179,92,56,0.15);
  color: var(--accent-wcag);
  font-size: 0.7rem;
  font-weight: 700;
  padding: 0.15em 0.5em;
  border-radius: 2px;
  letter-spacing: 0.04em;
}
.tarifs-toggle-btn.active .tarifs-toggle-badge {
  background: rgba(255,255,255,0.15);
  color: rgba(255,255,255,0.9);
}
.tarifs-taux {
  font-size: 0.78rem;
  color: var(--gris);
  line-height: 1.5;
}
.tarifs-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.88rem;
}
.tarifs-table th {
  text-align: left;
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gris);
  padding: 0.75rem 1rem;
  border-bottom: 2px solid var(--gris-clair);
}
.tarifs-table td {
  padding: 0.65rem 1rem;
  border-bottom: 1px solid var(--gris-clair);
  color: var(--gris-fonce);
}
.tarifs-table tr:last-child td { border-bottom: none; }
.tarifs-table td:first-child { font-weight: 700; color: var(--noir-doux); }
.tarifs-table td:nth-child(4) { font-weight: 600; color: var(--accent-wcag); }
.tarifs-faq .section-title { margin-bottom: 2rem; }
.faq-item {
  padding: 1.25rem 0;
  border-bottom: 1px solid var(--gris-clair);
}
.faq-item h3 {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--noir-doux);
  margin-bottom: 0.5rem;
}
.faq-item p {
  font-size: 0.88rem;
  color: var(--gris);
  line-height: 1.65;
}

/* ─── Blog liste ─────────────────────── */
.articles-liste { display: flex; flex-direction: column; gap: 0; }
.article-item {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 2rem;
  padding: 1.5rem 0;
  border-bottom: 1px solid var(--gris-clair);
  text-decoration: none;
  color: inherit;
  transition: background 0.15s;
}
.article-item:hover { background: var(--accent-clair); padding-left: 1rem; padding-right: 1rem; margin: 0 -1rem; }
.article-num {
  font-size: 0.75rem;
  color: var(--accent-wcag);
  font-weight: 700;
  letter-spacing: 0.1em;
  min-width: 2rem;
}
.article-info h3 {
  font-size: 1rem;
  font-weight: 700;
  color: var(--noir-doux);
  margin-bottom: 0.25rem;
}
.article-info p { font-size: 0.85rem; color: var(--gris); }
.article-tag {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-wcag);
  background: var(--accent-clair);
  padding: 0.2em 0.6em;
  border-radius: 2px;
  white-space: nowrap;
}

/* ─── Formulaire ────────────────────── */
.form-wrapper { max-width: 600px; }
.champ {
  margin-bottom: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
label {
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--noir-doux);
}
input, textarea, select {
  font-family: 'DM Sans', sans-serif;
  font-size: 1rem;
  color: var(--noir-doux);
  background: var(--blanc);
  border: 1px solid var(--gris-clair);
  padding: 0.75rem 1rem;
  width: 100%;
  outline: none;
  border-radius: 2px;
  transition: border-color 0.2s;
}
input:focus, textarea:focus, select:focus { border-color: var(--accent); }
textarea { resize: vertical; }
input::placeholder, textarea::placeholder {
  color: var(--gris);
  font-weight: 400;
  opacity: 1;
}
.note-form {
  font-size: 0.8rem;
  color: var(--gris);
  margin-top: 0.5rem;
  line-height: 1.5;
}

/* ─── Page intérieure ───────────────────── */
.page-hero {
  background: var(--noir-doux);
  color: var(--blanc);
  padding: 4rem var(--esp) 3rem;
}
.page-hero-inner {
  max-width: var(--max-width);
  margin: 0 auto;
}
.page-hero .section-eyebrow { color: var(--accent); } /* sur fond sombre : accent OK */
.page-hero h1 {
  font-size: clamp(1.75rem, 3.5vw, 2.5rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--blanc);
  margin: 0.75rem 0 1rem;
  line-height: 1.2;
}
.page-hero p,
.page-hero-sub {
  font-size: 1.05rem;
  color: rgba(255,255,255,0.85); /* WCAG : 0.7 → 0.85 */
  max-width: 560px;
  line-height: 1.7;
}
.page-hero-back { color: var(--blanc); text-decoration: underline; font-weight: 700; margin-left: 0.5rem; }

/* ─── Article blog ───────────────────── */
.article-content {
  max-width: 740px;
  margin: 0 auto;
  padding: 4rem var(--esp);
}
.article-content h2 {
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--noir-doux);
  margin: 2.5rem 0 0.75rem;
}
.article-content p { margin-bottom: 1rem; }
.article-content ul { padding-left: 1.5rem; margin-bottom: 1rem; }
.article-content li { margin-bottom: 0.4rem; }
.article-content table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.5rem 0;
  font-size: 0.9rem;
}
.article-content th {
  text-align: left;
  font-weight: 700;
  padding: 0.5rem 0.75rem;
  border-bottom: 2px solid var(--gris-clair);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gris);
}
.article-content td {
  padding: 0.5rem 0.75rem;
  border-bottom: 1px solid var(--gris-clair);
  vertical-align: top;
}

/* ─── CTA bande ─────────────────────── */
.cta-bande {
  background: var(--accent);
  color: var(--blanc);
  padding: 4rem var(--esp);
  text-align: center;
}
.cta-bande h2 {
  font-size: clamp(1.4rem, 2.5vw, 2rem);
  font-weight: 700;
  margin-bottom: 1rem;
  letter-spacing: -0.02em;
}
.cta-bande p {
  font-size: 1.05rem;
  color: rgba(255,255,255,0.9); /* WCAG : 0.85 → 0.9 */
  margin-bottom: 2rem;
}
.btn-white {
  background: var(--blanc);
  color: var(--accent);
  font-weight: 700;
}

/* ─── Footer ─────────────────────────── */
footer {
  background: var(--noir-doux);
  color: rgba(255,255,255,0.75);
  padding: 4rem var(--esp) 2rem;
}
.footer-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 4rem;
  margin-bottom: 3rem;
}
.footer-brand p {
  font-size: 0.85rem;
  color: rgba(255,255,255,0.75); /* WCAG : 0.5 → 0.75 */
  margin-top: 0.75rem;
  line-height: 1.6;
}
.footer-brand a { color: var(--accent); text-decoration: none; }
.footer-nav { display: flex; flex-direction: column; gap: 0.75rem; }
.footer-nav a {
  color: rgba(255,255,255,0.75); /* WCAG : 0.6 → 0.75 */
  text-decoration: none;
  font-size: 0.9rem;
  transition: color 0.2s;
}
.footer-nav a:hover { color: var(--blanc); }
.footer-legal { display: flex; flex-direction: column; gap: 0.75rem; }
.footer-legal a {
  color: rgba(255,255,255,0.65); /* WCAG : 0.4 → 0.65 */
  text-decoration: none;
  font-size: 0.85rem;
  transition: color 0.2s;
}
.footer-legal a:hover { color: rgba(255,255,255,0.9); }
.footer-bottom {
  max-width: var(--max-width);
  margin: 0 auto;
  padding-top: 2rem;
  border-top: 1px solid rgba(255,255,255,0.08);
  font-size: 0.8rem;
  color: rgba(255,255,255,0.55); /* WCAG : 0.3 → 0.55 */
}

/* ─── Responsive ────────────────────── */
@media (max-width: 1100px) {
  .grid-tarifs-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
  .hero-inner { grid-template-columns: 1fr; }
  .hero-metrics { display: none; }
  .grid-3 { grid-template-columns: 1fr; }
  .grid-tarifs { grid-template-columns: 1fr; }
  .grid-tarifs-4 { grid-template-columns: 1fr; }
  .footer-inner { grid-template-columns: 1fr; gap: 2rem; }
}
@media (max-width: 768px) {
  .nav-toggle { display: flex; }
  nav {
    display: none;
    position: absolute;
    top: 64px; left: 0; right: 0;
    background: var(--noir-doux);
    flex-direction: column;
    padding: 1rem var(--esp);
    gap: 0;
    border-top: 1px solid rgba(255,255,255,0.08);
  }
  nav.open { display: flex; }
  nav a {
    padding: 0.85rem 0;
    border-bottom: 1px solid rgba(255,255,255,0.06);
  }
  .nav-cta { margin-top: 0.5rem; text-align: center; }
}

/* ─── Bandeau consentement cookies (LPD / RGPD) ───────────── */
.atx-cookie {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 300;
  background: var(--noir-doux);
  color: rgba(255,255,255,0.85);
  border-top: 2px solid var(--accent);
  box-shadow: 0 -8px 24px rgba(0,0,0,0.25);
  padding: 1.25rem var(--esp);
}
.atx-cookie[hidden] { display: none !important; }
.atx-cookie-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}
.atx-cookie-text { flex: 1 1 auto; }
.atx-cookie-title {
  font-weight: 700;
  color: var(--blanc);
  margin-bottom: 0.35rem;
  letter-spacing: -0.01em;
}
.atx-cookie-text p {
  font-size: 0.85rem;
  line-height: 1.55;
  color: rgba(255,255,255,0.85);
}
.atx-cookie-cats {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
  margin-top: 0.85rem;
}
.atx-cookie-cat {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.82rem;
  font-weight: 400;
  letter-spacing: 0;
  color: rgba(255,255,255,0.85);
  cursor: pointer;
}
.atx-cookie-cat input { width: auto; margin: 0; accent-color: var(--accent); cursor: pointer; }
.atx-cookie-cat input:disabled { cursor: not-allowed; opacity: 0.6; }
.atx-cookie-cat strong { color: var(--blanc); font-weight: 700; }
.atx-cookie-actions {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.6rem;
  min-width: 200px;
}
.atx-cookie-btn {
  display: inline-block;
  padding: 0.7rem 1.5rem;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-align: center;
  cursor: pointer;
  border-radius: 2px;
  transition: opacity 0.2s, border-color 0.2s;
}
.atx-cookie-btn-primary {
  background: var(--accent);
  color: var(--blanc);
  border: 1px solid var(--accent);
}
.atx-cookie-btn-primary:hover { opacity: 0.85; }
.atx-cookie-btn-secondary {
  background: transparent;
  color: var(--blanc);
  border: 1px solid rgba(255,255,255,0.5);
}
.atx-cookie-btn-secondary:hover { border-color: var(--blanc); }
.atx-cookie-btn-link {
  background: none;
  border: none;
  color: rgba(255,255,255,0.65);
  font-family: 'DM Sans', sans-serif;
  font-size: 0.78rem;
  text-decoration: underline;
  cursor: pointer;
  padding: 0.2rem;
}
.atx-cookie-btn-link:hover { color: var(--blanc); }
@media (max-width: 768px) {
  .atx-cookie-inner { flex-direction: column; align-items: stretch; gap: 1rem; }
  .atx-cookie-actions { min-width: 0; flex-direction: row; flex-wrap: wrap; }
  .atx-cookie-btn { flex: 1 1 auto; }
  .atx-cookie-btn-link { flex-basis: 100%; }
}


/* ── Chantier A — Navigation conditionnelle auth (18.07.2026) ─────────────── */
/* Badge connecte : point vert + email tronque dans le header                  */
.nav-badge-connected {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.82rem;
  color: rgba(255,255,255,0.85); /* ratio ~7.5:1 sur #1A1A1A — WCAG AA */
  white-space: nowrap;
  cursor: default;
}
.nav-badge-dot {
  color: #4caf50; /* vert lisible sur fond sombre — ratio ~4.6:1 */
  font-size: 0.65rem;
  line-height: 1;
}
/* BP#24 : garde [hidden] explicite — le header peut avoir display flex/inline-flex */
#nav-cta[hidden]  { display: none !important; }
#hero-cta[hidden] { display: none !important; }

/* ── Icones login/logout nav (18.07.2026) ──────────────────────────────────── */
.nav-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 6px;
  text-decoration: none;
  transition: background 0.15s, opacity 0.15s;
  flex-shrink: 0;
}
.nav-icon-btn:hover { background: rgba(255,255,255,0.1); opacity: 1; }
.nav-icon {
  width: 20px;
  height: 20px;
  display: block;
}
.nav-icon-login  { color: #4caf50; } /* vert — invitation a entrer */
.nav-icon-logout { color: #ef5350; } /* rouge — action de sortie   */
.nav-vertical-locked { opacity: 0.55; }

/* ── Chantier D — Purge historique self-service nLPD art.25 (18.07.2026) ───── */
.dash-select-col {
  width: 32px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
}
.dash-select-col input[type='checkbox'] {
  width: 16px;
  height: 16px;
  cursor: pointer;
  accent-color: var(--accent);
}
.dash-purge-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  max-width: 700px;
  margin: 0 auto 1rem;
  padding: 0.75rem 1.25rem;
  background: #fff8f5;
  border: 1.5px solid rgba(179,92,56,0.25);
  border-radius: 6px;
  flex-wrap: wrap;
}
.dash-purge-bar[hidden] { display: none !important; }
.dash-select-bar { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0; padding: 0.4rem 0 0.4rem 1.25rem; }
.dash-select-bar[hidden] { display: none !important; }
.dash-pagination { display: flex; align-items: center; justify-content: center; gap: 1rem; margin-top: 1rem; font-size: 0.88rem; }
.dash-pagination[hidden] { display: none !important; }
.dash-purge-count {
  font-size: 0.88rem;
  color: var(--gris-fonce);
}
.btn-purge {
  background: #c62828;
  color: var(--blanc);
  border: none;
  border-radius: 4px;
  padding: 0.55rem 1.1rem;
  font-family: 'DM Sans', sans-serif;
  font-weight: 700;
  font-size: 0.85rem;
  cursor: pointer;
  transition: opacity 0.2s;
}
.btn-purge:hover:not(:disabled) { opacity: 0.85; }
.btn-purge:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}
/* Modal confirmation purge */
.purge-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 500;
}
.purge-modal-overlay[hidden] { display: none !important; }
.purge-modal-box {
  background: var(--blanc);
  border-radius: 8px;
  padding: 2rem;
  max-width: 420px;
  width: 90%;
  box-shadow: 0 8px 32px rgba(0,0,0,0.18);
}
.purge-modal-box h3 {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--noir-doux);
  margin-bottom: 0.75rem;
}
.purge-modal-box p {
  font-size: 0.9rem;
  color: var(--gris-fonce);
  margin-bottom: 1.5rem;
  line-height: 1.5;
}
.purge-modal-actions {
  display: flex;
  gap: 0.75rem;
  justify-content: flex-end;
}
.btn-purge-cancel {
  background: transparent;
  border: 1.5px solid var(--gris-clair);
  border-radius: 4px;
  padding: 0.55rem 1.1rem;
  font-family: 'DM Sans', sans-serif;
  font-weight: 700;
  font-size: 0.85rem;
  cursor: pointer;
  color: var(--gris-fonce);
  transition: border-color 0.2s;
}
.btn-purge-cancel:hover { border-color: var(--gris-fonce); }


/* ── Section confiance (homepage) ────────────────────────────── */
.confiance-card { text-align: center; }
.confiance-stat {
  font-size: 2.2rem;
  font-weight: 700;
  color: var(--accent);
  letter-spacing: -0.04em;
  line-height: 1;
  margin-bottom: 0.4rem;
  display: flex;
  justify-content: center;
  align-items: center;
}
.confiance-label {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gris);
  margin-bottom: 0.75rem;
}
.confiance-detail {
  font-size: 0.88rem;
  color: var(--gris-fonce);
  line-height: 1.6;
  margin: 0;
}
.engagements {
  margin-top: 3rem;
  background: var(--noir-doux);
  border-radius: 6px;
  padding: 2rem 2.5rem;
}
.engagements-titre {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 1.25rem;
}
.engagements-liste {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.65rem 2.5rem;
}
.engagements-liste li {
  font-size: 0.88rem;
  color: rgba(255,255,255,0.8);
  line-height: 1.5;
}
@media (max-width: 640px) {
  .engagements { padding: 1.5rem; }
  .engagements-liste { grid-template-columns: 1fr; }
}

/* ─── Pages message (404 / annulation / merci / erreur-paiement) ─────────── */
/* DT-QC-05 — migré depuis les <style> inline de ces 4 pages (25.07.2026)    */
.page-msg-section { padding: 4rem var(--esp); }
.page-msg-wrap {
  max-width: 500px;
  margin: 0 auto;
  text-align: center;
  background: var(--blanc);
  border: 1.5px solid var(--gris-clair);
  border-radius: 6px;
  padding: 3rem 2rem;
}
.page-msg-wrap--error { border-color: #e57373; }
.page-msg-icon { font-size: 3rem; margin-bottom: 1rem; }
.page-msg-wrap h2 { font-size: 1.5rem; font-weight: 700; margin-bottom: 1rem; color: var(--noir); }
.page-msg-wrap p { color: var(--gris); margin-bottom: 2rem; line-height: 1.6; }
.page-msg-actions { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }

/* ─── Pages légales (cgu / confidentialite / mentions-legales) ───────────── */
/* DT-QC-05 — migré depuis les <style> inline (25.07.2026)                   */
.legal-section { padding: 3rem var(--esp) 5rem; }
.legal-content { max-width: 740px; margin: 0 auto; }
.legal-content h2 {
  font-size: 1.1rem; font-weight: 700; color: var(--noir-doux);
  margin: 2.5rem 0 0.75rem; padding-bottom: 0.4rem;
  border-bottom: 1px solid var(--gris-clair);
}
.legal-content h3 { font-size: 0.95rem; font-weight: 700; color: var(--gris-fonce); margin: 1.5rem 0 0.5rem; }
.legal-content p, .legal-content li { font-size: 0.92rem; color: var(--gris-fonce); line-height: 1.75; margin-bottom: 0.5rem; }
.legal-content ul { padding-left: 1.5rem; margin-bottom: 1rem; }
.legal-content a { color: var(--accent); text-decoration: underline; }
.legal-block { background: var(--fond); border: 1.5px solid var(--gris-clair); border-radius: 6px; padding: 1.25rem 1.5rem; margin: 0.75rem 0 1rem; }
.legal-block p { margin-bottom: 0.3rem; }
.legal-date { margin-top: 3rem; font-size: 0.8rem; color: var(--gris); border-top: 1px solid var(--gris-clair); padding-top: 1rem; }
.legal-table { width: 100%; border-collapse: collapse; font-size: 0.88rem; margin: 0.75rem 0 1.5rem; }
.legal-table th { text-align: left; font-weight: 700; font-size: 0.75rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--gris); border-bottom: 2px solid var(--gris-clair); padding: 0.5rem 0.75rem; }
.legal-table td { padding: 0.6rem 0.75rem; border-bottom: 1px solid var(--gris-clair); vertical-align: top; color: var(--gris-fonce); }
.legal-table tr:last-child td { border-bottom: none; }

/* ─── Page À propos ──────────────────────────────────────────────────────── */
/* DT-QC-05 — migré depuis le <style> inline (25.07.2026)                    */
.about-section { padding: 4rem var(--esp); }
.about-inner { max-width: 720px; margin: 0 auto; display: flex; flex-direction: column; gap: 3rem; }
.about-block h2 { font-size: 1.25rem; font-weight: 700; color: var(--noir-doux); margin-bottom: 1rem; letter-spacing: -0.02em; }
.about-block p { color: var(--gris-fonce); line-height: 1.75; margin-bottom: 0.9rem; }
.about-block p:last-child { margin-bottom: 0; }
.about-block a { color: var(--accent); text-decoration: none; font-weight: 600; }
.about-block a:hover { text-decoration: underline; }
.about-limits { list-style: none; padding: 0; margin: 1rem 0 0; display: flex; flex-direction: column; gap: 1.25rem; }
.about-limits li { padding: 1rem 1.25rem; background: var(--fond); border-left: 3px solid var(--accent); border-radius: 0 4px 4px 0; color: var(--gris-fonce); line-height: 1.65; font-size: 0.92rem; }
.about-limits li strong { color: var(--noir-doux); }
.about-cta { padding-top: 1rem; border-top: 1px solid var(--gris-clair); display: flex; flex-direction: column; gap: 1.25rem; }
.about-cta p { color: var(--gris-fonce); line-height: 1.7; margin: 0; }

/* ─── Page Tarifs ────────────────────────────────────────────────────────── */
/* DT-QC-05 — migré depuis le <style> inline (25.07.2026)                    */
.tarif-exempt-badge { background: #e6f4ea; color: #1e7e34; border: 1.5px solid #a8d5b5; border-radius: 4px; padding: 0.65rem 1rem; font-size: 0.85rem; font-weight: 700; text-align: center; width: 100%; display: block; box-sizing: border-box; margin-top: 0.5rem; }

/* ─── Page Vertical ──────────────────────────────────────────────────────── */
/* DT-QC-05 — migré depuis le <style> inline (25.07.2026)                    */
.vertical-tabs { display:flex; flex-wrap:nowrap; justify-content:center; gap:0.35rem; max-width:1000px; margin:0 auto 1.5rem; overflow-x:auto; }
.vtab { display:flex; align-items:center; gap:0.3rem; padding:0.5rem 0.75rem; border:1.5px solid var(--gris-clair); border-radius:6px; background:var(--blanc); font-family:'DM Sans',sans-serif; font-size:0.9rem; font-weight:600; color:var(--gris-fonce); cursor:pointer; transition:border-color 0.15s,background 0.15s; }
.vtab.active { border-color:var(--accent); background:var(--accent-clair); color:var(--accent); }
.analyser-hint { font-size:0.78rem; color:var(--gris); margin-top:0.35rem; }
#vertical-search-bar { display:flex; flex-direction:row; align-items:stretch; border:1.5px solid var(--gris-clair); border-radius:6px; overflow:hidden; transition:border-color 0.2s; width:100%; }
#vertical-search-bar:focus-within { border-color:var(--accent); }
#vertical-input { border:none; outline:none; height:3rem; padding:0 1rem; flex:1; min-width:0; font-family:'DM Sans',sans-serif; font-size:0.95rem; color:var(--gris-fonce); background:var(--blanc); }
#locale-select { height:3rem; border:none; border-left:1.5px solid var(--gris-clair); border-radius:0; padding:0 0.5rem; font-family:'DM Sans',sans-serif; font-size:0.9rem; background:var(--blanc); color:var(--gris-fonce); outline:none; flex-shrink:0; width:auto; cursor:pointer; }
#locale-select[hidden] { display:none !important; }
#vertical-btn { height:3rem; border-radius:0; padding:0 1.5rem; white-space:nowrap; border-left:1.5px solid rgba(0,0,0,0.1); font-size:0.9rem; flex-shrink:0; }
.gap-tag { display:inline-block; background:#fff3e0; color:#b34000; border:1px solid #ffcc80; border-radius:4px; padding:0.2rem 0.55rem; font-size:0.82rem; font-weight:600; margin:0.2rem; }
#gap-report-body { padding:1rem 1.25rem; }
.score-wrap { display:flex; gap:2rem; align-items:center; max-width:700px; margin:0 auto 2rem; }
.score-circle { position:relative; width:120px; height:120px; flex-shrink:0; }
.score-svg { width:120px; height:120px; transform:rotate(-90deg); }
.score-track { fill:none; stroke:var(--gris-clair); stroke-width:10; }
.score-fill { fill:none; stroke:var(--accent); stroke-width:10; stroke-linecap:round; stroke-dasharray:326.7; stroke-dashoffset:326.7; transition:stroke-dashoffset 0.8s ease; }
.score-inner { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; }
.score-inner span:first-child { font-size:1.8rem; font-weight:800; color:var(--gris-fonce); }
.score-label { font-size:0.75rem; color:var(--gris); }
.score-meta h2 { font-size:1rem; font-weight:700; margin-bottom:0.4rem; }
.score-meta p { font-size:0.85rem; color:var(--gris); margin-bottom:0.2rem; }
@media(max-width:600px){.vertical-tabs{flex-direction:row;}.score-wrap{flex-direction:column;text-align:center;}#vertical-search-bar{flex-direction:column;max-width:100%;}#vertical-btn{height:2.75rem;border-left:none;border-top:1.5px solid rgba(0,0,0,0.1);}}

/* ─── @keyframes globaux ─────────────────────────────────────────────────── */
/* DT-QC-05 — migres depuis les <style> inline de analyser, profil, kb       */
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes kb-spin { to { transform: rotate(360deg); } }

/* ─── Page Analyser ──────────────────────────────────────────────────────── */
/* DT-QC-05 — migre depuis le <style> inline (25.07.2026)                    */
/* Variante score-circle pour analyser : fond blanc, bordure, gap plus large  */
/* que la version vertical (score-wrap dans style.css section Vertical)       */
.score-wrap--analyser { gap:2.5rem; max-width:700px; margin:0 auto 2.5rem; background:var(--blanc); border:2px solid var(--gris-clair); border-radius:6px; padding:2rem; }
.score-wrap--analyser .score-track { stroke-width:8; }
.score-wrap--analyser .score-fill { stroke-width:8; stroke-dasharray:327; stroke-dashoffset:327; }
.score-wrap--analyser .score-inner { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); text-align:center; }
.score-wrap--analyser .score-inner span:first-child { font-size:1.75rem; font-weight:700; color:var(--accent); letter-spacing:-0.04em; }
.score-wrap--analyser .score-meta h2 { font-size:1rem; font-weight:700; color:var(--noir); margin-bottom:0.4rem; word-break:break-all; }
.score-date { font-size:0.78rem !important; }
.analyser-section { padding:3rem var(--esp); }
.engine-picker { max-width:700px; margin:0 auto 1.5rem; background:var(--blanc); border:1.5px solid var(--gris-clair); border-radius:6px; padding:1.5rem 2rem; }
.engine-picker-title { font-size:0.78rem; font-weight:700; letter-spacing:0.08em; text-transform:uppercase; color:var(--gris); margin-bottom:1.1rem; }
.engine-groups { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:1.25rem; align-items:start; }
.engine-group { display:flex; flex-direction:column; background:var(--fond); border:1px solid var(--gris-clair); border-radius:6px; padding:1rem 1.1rem; }
.engine-group h4 { font-size:0.8rem; font-weight:700; color:var(--gris-fonce); margin:0 0 0.75rem; padding-bottom:0.5rem; border-bottom:1px solid var(--gris-clair); }
.engine-cb-label { display:flex; align-items:center; gap:0.55rem; font-size:0.88rem; color:var(--gris-fonce); padding:0.25rem 0; cursor:pointer; }
.engine-cb-label input { flex-shrink:0; width:16px; height:16px; margin:0; accent-color:var(--accent); }
.engine-cb-label span { line-height:1.2; }
.engine-cb-label input:disabled { cursor:not-allowed; }
.engine-group:has(.engine-cb:disabled) .engine-cb-label { color:var(--gris); }
.engine-lock-note { font-size:0.74rem; color:var(--gris); margin:0.6rem 0 0; padding-top:0.6rem; border-top:1px dashed var(--gris-clair); }
.engine-lock-note a { color:var(--accent); font-weight:700; text-decoration:none; }
.engines-denied-note { max-width:700px; margin:0 auto 1.5rem; background:var(--fond); border:1.5px solid var(--gris-clair); border-radius:6px; padding:0.9rem 1.25rem; font-size:0.85rem; color:var(--gris-fonce); }
.engines-denied-note a { color:var(--accent); font-weight:700; text-decoration:none; }
.analyser-form-wrap { max-width:700px; margin:0 auto 2.5rem; }
.analyser-form-inner { background:var(--blanc); border:2px solid var(--gris-clair); border-radius:6px; padding:2rem; }
.analyser-input-group { display:flex; gap:0.75rem; }
.analyser-input-group input { flex:1; border:1.5px solid var(--gris-clair); border-radius:4px; padding:0.75rem 1rem; font-family:'DM Sans',sans-serif; font-size:0.95rem; color:var(--gris-fonce); outline:none; transition:border-color 0.2s; }
.analyser-input-group input:focus { border-color:var(--accent); }
.variant-picker { display:flex; flex-direction:column; gap:0.5rem; margin-bottom:0.25rem; }
.variant-label { display:flex; align-items:flex-start; gap:0.75rem; padding:0.75rem 1rem; border:1.5px solid var(--gris-clair); border-radius:5px; cursor:pointer; transition:border-color 0.15s,background 0.15s; }
.variant-label:has(.variant-radio:checked) { border-color:var(--accent); background:var(--accent-clair,#fdf4f1); }
.variant-radio { flex-shrink:0; width:auto !important; display:inline-block !important; margin-top:0.2rem; accent-color:var(--accent); }
.variant-info { display:flex; flex-direction:column; gap:0.15rem; flex:1; min-width:0; }
.variant-title { font-size:0.9rem; font-weight:700; color:var(--gris-fonce); display:flex; align-items:center; gap:0.4rem; flex-wrap:wrap; }
.variant-desc { font-size:0.8rem; color:var(--gris); }
.crawl-form-badge { background:var(--gris-clair); color:var(--gris); font-size:0.7rem; font-weight:700; padding:0.15rem 0.5rem; border-radius:4px; text-transform:uppercase; }
.dash-crawl-message { margin-top:0.75rem; font-size:0.9rem; }
.dash-crawl-message.ok { color:#1a7f37; }
.dash-crawl-message.error { color:#c0362c; }
.analyser-note { margin-top:0.75rem; font-size:0.875rem; color:var(--gris); min-height:1.2em; }
.analyser-note a { color:var(--accent); text-decoration:none; font-weight:700; }
.spinner-arc { animation:spin 0.8s linear infinite; transform-origin:center; }
.top3-card { background:var(--blanc); border:2px solid var(--accent); border-radius:6px; overflow:hidden; }
.top3-header { display:flex; align-items:center; justify-content:space-between; padding:0.85rem 1.25rem; background:var(--accent-clair); border-bottom:1.5px solid rgba(179,92,56,0.2); }
.top3-eyebrow { font-size:0.72rem; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; color:var(--accent); }
.top3-badge { font-size:0.72rem; font-weight:700; padding:0.15em 0.55em; border-radius:3px; background:var(--accent); color:var(--blanc); }
.top3-loading { display:flex; justify-content:center; padding:1.5rem; }
.top3-spinner { width:22px; height:22px; border:3px solid var(--gris-clair); border-top-color:var(--accent); border-radius:50%; animation:spin 0.7s linear infinite; }
.top3-list { list-style:none; margin:0; padding:0; }
.top3-item { display:flex; align-items:flex-start; gap:1rem; padding:0.9rem 1.25rem; border-bottom:1px solid var(--gris-clair); }
.top3-item:last-child { border-bottom:none; }
.top3-num { flex-shrink:0; width:24px; height:24px; background:var(--accent); color:var(--blanc); border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:0.72rem; font-weight:700; margin-top:0.1rem; }
.top3-action { flex:1; font-size:0.9rem; font-weight:700; color:var(--noir-doux); line-height:1.4; }
.top3-code { font-size:0.75rem; color:var(--gris); font-family:monospace; margin-top:0.15rem; }
.top3-poids { flex-shrink:0; font-size:0.72rem; color:var(--gris); white-space:nowrap; padding-top:0.15rem; }
.cat-block { max-width:700px; margin:0 auto 1.5rem; background:var(--blanc); border:1.5px solid var(--gris-clair); border-radius:6px; overflow:hidden; }
.cat-header { display:flex; justify-content:space-between; align-items:center; padding:1rem 1.25rem; background:var(--fond); border-bottom:1.5px solid var(--gris-clair); cursor:pointer; user-select:none; }
.cat-header h3 { font-size:0.9rem; font-weight:700; letter-spacing:0.05em; text-transform:uppercase; color:var(--gris-fonce); }
.cat-badge { font-size:0.78rem; font-weight:700; padding:0.2rem 0.6rem; border-radius:20px; background:var(--gris-clair); color:var(--gris-fonce); }
.cat-badge.ok { background:#e6f4ea; color:#1e7e34; }
.cat-badge.warn { background:#fff3e0; color:#b34000; }
.cat-badge.ko { background:#fce8e6; color:#c62828; }
.cat-chevron { font-size:0.75rem; color:var(--gris); transition:transform 0.2s; }
.cat-header.open .cat-chevron { transform:rotate(180deg); }
.cat-body { display:none; }
.cat-body.open { display:block; }
.rule-row { display:flex; align-items:flex-start; gap:0.75rem; padding:0.75rem 1.25rem; border-bottom:1px solid var(--gris-clair); font-size:0.88rem; }
.rule-row:last-child { border-bottom:none; }
.rule-icon { font-size:1rem; flex-shrink:0; margin-top:0.1rem; }
.rule-content { flex:1; }
.rule-code { font-weight:700; color:var(--gris-fonce); font-size:0.82rem; }
.rule-note { color:var(--gris); font-size:0.82rem; margin-top:0.1rem; }
.rule-value { font-size:0.78rem; color:var(--gris); font-style:italic; margin-top:0.15rem; }
.rule-poids { font-size:0.72rem; color:var(--gris); white-space:nowrap; flex-shrink:0; margin-top:0.2rem; }
.btn-comprendre-inline { flex-shrink:0; background:transparent; border:1px solid var(--gris-clair); border-radius:3px; padding:0.2rem 0.55rem; font-family:'DM Sans',sans-serif; font-size:0.72rem; font-weight:700; color:var(--gris); cursor:pointer; white-space:nowrap; transition:border-color 0.15s,color 0.15s; margin-top:0.1rem; }
.btn-comprendre-inline:hover { border-color:var(--accent); color:var(--accent); }
.btn-pdf { display:inline-flex; align-items:center; gap:0.5rem; background:#0f172a; color:#fff; border:none; border-radius:6px; padding:0.65rem 1.4rem; font-family:'DM Sans',sans-serif; font-size:0.95rem; font-weight:600; cursor:pointer; transition:background 0.2s; }
.btn-pdf:hover { background:#1e3a5f; }
.btn-pdf:disabled { background:#94a3b8; cursor:not-allowed; }
.pdf-hint { margin-top:0.5rem; font-size:0.8rem; color:#64748b; }
.pdf-hint a { color:var(--accent); font-weight:700; text-decoration:none; }
.analyser-error { max-width:700px; margin:0 auto; background:#fce8e6; border:1.5px solid #e57373; border-radius:6px; padding:1.25rem 1.5rem; color:#c62828; font-size:0.9rem; }
.analyser-again { max-width:700px; margin:0 auto 2rem; text-align:center; }
.verticals-section { max-width:900px; margin:3rem auto 0; }
.verticals-title { font-size:0.78rem; font-weight:700; letter-spacing:0.08em; text-transform:uppercase; color:var(--gris); margin-bottom:0.75rem; text-align:center; }
.vertical-cards { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:1.25rem; }
.vertical-card { background:var(--blanc); border:1.5px solid var(--gris-clair); border-radius:6px; padding:1.25rem; transition:border-color 0.15s; }
.vertical-card h4 { font-size:0.9rem; margin-bottom:0.5rem; }
.vc-desc { font-size:0.82rem; color:var(--gris); margin-bottom:0.75rem; line-height:1.4; }
.vc-cta { font-size:0.85rem; font-weight:700; margin:0; }
.vc-cta a { color:var(--accent); text-decoration:none; }
.vertical-card.is-full { cursor:pointer; }
.vertical-card.is-full:hover { border-color:var(--accent); }
.vertical-card.is-locked { opacity:0.8; }
.an-drawer-overlay { position:fixed; inset:0; background:rgba(0,0,0,0.3); z-index:199; }
.an-drawer { position:fixed; top:0; right:0; bottom:0; width:min(400px,92vw); background:var(--blanc); box-shadow:-4px 0 24px rgba(0,0,0,0.12); z-index:200; display:flex; flex-direction:column; transform:translateX(100%); transition:transform 0.26s cubic-bezier(0.4,0,0.2,1); }
/* D-71bis : display:flex explicite => [hidden] ignore par le navigateur sans cette regle */
.an-drawer[hidden] { display:flex; transform:translateX(100%); }
.an-drawer.open { transform:translateX(0); }
.an-drawer-inner { display:flex; flex-direction:column; height:100%; }
.an-drawer-header { display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; padding:1.25rem 1.5rem; border-bottom:1.5px solid var(--gris-clair); border-left:4px solid var(--accent); }
.an-drawer-badge { display:inline-block; font-size:0.68rem; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; padding:0.15em 0.5em; border-radius:3px; margin-bottom:0.3rem; }
.an-drawer-header h3 { font-size:0.88rem; font-weight:700; color:var(--noir-doux); margin:0; font-family:monospace; letter-spacing:0.04em; }
.an-drawer-close { background:none; border:none; font-size:1.4rem; line-height:1; color:var(--gris); cursor:pointer; padding:0; flex-shrink:0; transition:color 0.15s; }
.an-drawer-close:hover { color:var(--noir); }
.an-drawer-body { flex:1; overflow-y:auto; padding:1.5rem; }
.an-spinner { width:22px; height:22px; border:3px solid var(--gris-clair); border-top-color:var(--accent); border-radius:50%; animation:spin 0.7s linear infinite; margin:0 auto; }
@media(max-width:600px){ .analyser-input-group{flex-direction:column;} .score-wrap--analyser{flex-direction:column;text-align:center;} }

/* ─── Page Compte ────────────────────────────────────────────────────────── */
/* DT-QC-05 — migre depuis le <style> inline (25.07.2026)                    */
.compte-section { padding:3rem var(--esp); }
.compte-wrap { max-width:480px; margin:0 auto 3rem; background:var(--blanc); border:1.5px solid var(--gris-clair); border-radius:6px; overflow:hidden; }
.compte-tabs { display:flex; border-bottom:1.5px solid var(--gris-clair); }
.tab-btn { flex:1; background:none; border:none; padding:1rem; font-family:'DM Sans',sans-serif; font-size:0.9rem; font-weight:700; color:var(--gris); cursor:pointer; border-bottom:2.5px solid transparent; transition:color 0.2s,border-color 0.2s; }
.tab-btn.active { color:var(--accent); border-bottom-color:var(--accent); background:var(--fond); }
.tab-panel { display:none; padding:1.75rem; }
.tab-panel.active { display:block; }
.form-legend { font-size:0.78rem; color:var(--gris); margin-bottom:1rem; }
.required { color:var(--accent); font-weight:700; margin-left:0.15rem; }
.required-hint { color:var(--gris); }
.form-group { margin-bottom:1.25rem; }
.form-group label { display:block; font-size:0.85rem; font-weight:700; color:var(--gris-fonce); margin-bottom:0.4rem; }
.form-group input[type="email"],.form-group input[type="password"],.form-group input[type="text"] { width:100%; border:1.5px solid var(--gris-clair); border-radius:4px; padding:0.7rem 0.9rem; font-family:'DM Sans',sans-serif; font-size:0.95rem; color:var(--gris-fonce); outline:none; transition:border-color 0.2s; }
.form-group input:focus { border-color:var(--accent); }
.form-group input.input-error { border-color:#c62828; }
.form-hint { display:block; font-weight:400; color:var(--gris); font-size:0.78rem; margin-top:0.2rem; }
.form-check { display:flex; gap:0.65rem; align-items:flex-start; width:100%; }
.form-check input[type="checkbox"] { width:16px; height:16px; min-width:16px; margin-top:0.15rem; flex-shrink:0; cursor:pointer; accent-color:var(--accent); }
.form-check label { flex:1; min-width:0; font-size:0.85rem; font-weight:400; color:var(--gris-fonce); cursor:pointer; line-height:1.5; }
.form-check label strong { font-weight:700; }
.form-check label a { color:var(--accent); text-decoration:underline; }
.form-check--required { background:var(--fond); border:1.5px solid var(--gris-clair); border-radius:4px; padding:0.75rem; }
.form-msg { margin-top:1rem; padding:0.75rem 1rem; border-radius:4px; font-size:0.85rem; }
.form-msg.success { background:#e6f4ea; color:#1e7e34; border:1px solid #a8d5b5; }
.form-msg.error   { background:#fce8e6; color:#c62828; border:1px solid #e57373; }
.form-msg.warning { background:#fff8e1; color:#5d4037; border:1px solid #f9a825; }
.btn-full { width:100%; margin-top:0.5rem; }
.compte-avantages { max-width:900px; margin:0 auto; display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:1.25rem; }
.avantage { display:flex; gap:1rem; align-items:center; background:var(--blanc); border:1.5px solid var(--gris-clair); border-radius:6px; padding:1.25rem; }
.av-icon { font-size:1.5rem; flex-shrink:0; width:2.5rem; display:flex; align-items:center; justify-content:center; }
.avantage strong { display:block; font-size:0.9rem; margin-bottom:0.3rem; }
.avantage p { font-size:0.82rem; color:var(--gris); }
.avantage a { color:var(--accent); text-decoration:none; font-weight:700; }

/* ─── Page Dashboard ─────────────────────────────────────────────────────── */
/* DT-QC-05 — migre depuis le <style> inline (25.07.2026)                    */
.dashboard-section { padding:3rem var(--esp); }
.dash-loading { text-align:center; color:var(--gris); padding:3rem; font-size:0.9rem; }
.dash-unauth { max-width:400px; margin:0 auto; text-align:center; padding:3rem; }
.dash-unauth p { margin-bottom:1.25rem; color:var(--gris-fonce); }
.dash-banner-warning { max-width:700px; margin:0 auto 1.5rem; background:#fff8e1; border:1.5px solid #f9a825; border-radius:6px; padding:0.9rem 1.25rem; display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap; font-size:0.88rem; color:#5d4037; }
/* D-71bis : display:flex explicite => [hidden] ignore par le navigateur sans cette regle
   (BP#24, audit systematique 16.07.2026) */
.dash-banner-warning[hidden] { display:none !important; }
.banner-actions { display:flex; align-items:center; gap:0.5rem; flex-shrink:0; }
.btn-banner { background:#f9a825; color:#1a1a1a; border:none; border-radius:4px; padding:0.4rem 0.9rem; font-family:'DM Sans',sans-serif; font-weight:700; font-size:0.82rem; cursor:pointer; transition:opacity 0.2s; }
.btn-banner:hover { opacity:0.85; }
.btn-banner-close { background:transparent; border:none; font-size:1.1rem; cursor:pointer; color:#888; line-height:1; padding:0 0.25rem; }
.btn-banner-close:hover { color:#333; }
.dash-cards { display:grid; grid-template-columns:repeat(auto-fit,minmax(130px,1fr)); gap:0.75rem; max-width:700px; margin:0 auto 1.5rem; }
.dash-card { background:var(--blanc); border:1.5px solid var(--gris-clair); border-radius:6px; padding:0.75rem 1rem; }
.dash-card-label { font-size:0.7rem; font-weight:700; letter-spacing:0.08em; text-transform:uppercase; color:var(--gris); margin-bottom:0.3rem; }
.dash-card-value { font-size:1.1rem; font-weight:700; color:var(--accent); letter-spacing:-0.03em; }
.dash-upgrade { max-width:700px; margin:0 auto 2rem; background:var(--accent-clair); border:1.5px solid rgba(179,92,56,0.2); border-radius:6px; padding:1.25rem 1.5rem; display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap; }
.dash-upgrade p { font-size:0.9rem; color:var(--gris-fonce); }
/* D-71bis : idem .dash-banner-warning — display:flex d'auteur l'emporte sur [hidden]
   (BP#24, audit systematique 16.07.2026) */
.dash-upgrade[hidden] { display:none !important; }
.dash-stats-link { display:block; max-width:700px; margin:0 auto 2rem; background:var(--blanc); border:1.5px solid var(--gris-clair); border-radius:6px; padding:1rem 1.25rem; font-size:0.9rem; font-weight:700; color:var(--accent); text-decoration:none; transition:border-color 0.2s; }
.dash-stats-link:hover { border-color:var(--accent); }
.dash-historique { max-width:700px; margin:0 auto 2rem; }
.dash-historique-header { display:flex; align-items:center; justify-content:space-between; flex-wrap:nowrap; gap:0.75rem; margin-bottom:1rem; }
.dash-historique h2 { font-size:1rem; font-weight:700; color:var(--gris-fonce); margin:0; letter-spacing:0.03em; flex-shrink:0; }
.dash-check-verticals { display:flex; align-items:center; gap:0.4rem; font-size:0.9rem; color:var(--gris-fonce); cursor:pointer; user-select:none; white-space:nowrap; flex-shrink:0; margin-left:auto; }
.dash-check-verticals input { cursor:pointer; }
.analyse-badge { font-size:0.78rem; flex-shrink:0; white-space:nowrap; }
.analyse-row { display:flex; align-items:center; justify-content:space-between; background:var(--blanc); border:1.5px solid var(--gris-clair); border-radius:4px; padding:0.9rem 1.25rem; margin-bottom:0.6rem; gap:1rem; }
.analyse-url { font-size:0.88rem; color:var(--gris-fonce); word-break:break-all; flex:1; }
.analyse-score { font-size:1.1rem; font-weight:700; color:var(--accent); flex-shrink:0; }
.analyse-score.high { color:#1e7e34; }
.analyse-score.mid  { color:#e65100; }
.analyse-score.low  { color:#c62828; }
.analyse-uid { font-size:0.72rem; font-family:monospace; color:var(--gris); background:var(--gris-clair); border-radius:3px; padding:0.1rem 0.4rem; margin-left:0.5rem; flex-shrink:0; white-space:nowrap; }
.analyse-date { font-size:0.75rem; color:var(--gris); flex-shrink:0; }
.dash-empty { text-align:center; color:var(--gris); font-size:0.9rem; padding:2rem; }
.dash-empty a:not(.btn) { color:var(--accent); text-decoration:none; font-weight:700; }
.dash-empty .btn-primary { color:var(--blanc) !important; }
.dash-footer { max-width:700px; margin:0 auto; text-align:right; }
.crawl-detail { background:var(--gris-clair,#f5f5f5); border-radius:4px; padding:1rem 1.25rem; margin:-0.4rem 0 0.6rem; font-size:0.9rem; }
.crawl-detail-inner h4 { font-size:0.8rem; text-transform:uppercase; letter-spacing:0.05em; margin:0.75rem 0 0.4rem; }
.crawl-detail-inner h4:first-child { margin-top:0; }
.crawl-detail-inner ul { margin:0 0 0.5rem; padding-left:1.2rem; }
.crawl-detail-inner li { margin-bottom:0.25rem; word-break:break-all; }
.crawl-toggle { font-size:1.4rem; line-height:1; color:var(--gris); flex-shrink:0; transition:transform 0.2s; }
.crawl-toggle.open { transform:rotate(180deg); }
.crawl-pdf-btn { display:inline-block; margin-bottom:1rem; text-decoration:none; }
.dash-row-outer { margin-bottom:0.6rem; }
.crawl-row { display:flex; flex-direction:column; gap:0.4rem; background:var(--blanc); border:1.5px solid var(--gris-clair); border-radius:4px; padding:0.9rem 1.25rem; }
.crawl-row-top { display:flex; align-items:center; gap:0.5rem; min-height:1.5rem; }
.dash-row-check, #chk-select-all { width:14px; height:14px; flex-shrink:0; cursor:pointer; accent-color:var(--accent); margin:0; transform:scale(0.68); transform-origin:center center; }
.crawl-domain { font-size:0.88rem; color:var(--gris-fonce); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; flex:1; min-width:0; /* indispensable pour text-overflow dans un flex item */ }
.crawl-row-bottom .analyse-score { font-size:1rem; }
@media(max-width:600px){ .dash-upgrade{flex-direction:column;} .analyse-row{flex-wrap:wrap;} .dash-banner-warning{flex-direction:column;align-items:flex-start;} }

/* ─── Page Dashboard/Stats ───────────────────────────────────────────────── */
/* DT-QC-05 — migre depuis le <style> inline (25.07.2026)                    */
.dash-stats-light-note { max-width:700px; margin:0 auto 2rem; background:var(--accent-clair); border:1.5px solid rgba(179,92,56,0.2); border-radius:6px; padding:1.25rem 1.5rem; font-size:0.9rem; color:var(--gris-fonce); }
.dash-stats-light-note a { color:var(--accent); font-weight:700; text-decoration:none; }
/* D-71bis : display:flex explicite => [hidden] ignore par le navigateur (BP#24) */
#dash-historique-trend[hidden] { display:none !important; }
.trend-rule-row { display:flex; align-items:center; justify-content:space-between; background:var(--blanc); border:1.5px solid var(--gris-clair); border-radius:4px; padding:0.6rem 1rem; margin-bottom:0.4rem; gap:0.75rem; font-size:0.85rem; }
.trend-rule-code { flex:1; color:var(--gris-fonce); font-weight:700; word-break:break-all; }
.trend-rule-badge { flex-shrink:0; font-size:0.75rem; font-weight:700; border-radius:3px; padding:0.15rem 0.5rem; }
.trend-rule-ok  { background:#e8f5e9; color:#1e7e34; }
.trend-rule-ko  { background:#fce4ec; color:#c62828; }
.trend-rule-reg { background:#fff3e0; color:#b34000; }
.trend-rule-poids { flex-shrink:0; color:var(--gris); font-size:0.78rem; }

/* ─── Page Base de connaissances (kb) ────────────────────────────────────── */
/* DT-QC-05 — migre depuis le <style> inline (25.07.2026)                    */
.kb-section { padding:2rem 1.5rem 4rem; max-width:1200px; margin:0 auto; }
.kb-search-wrap { position:relative; max-width:520px; margin:0 auto 2rem; }
.kb-search-wrap input { width:100%; box-sizing:border-box; border:1.5px solid var(--gris-clair); border-radius:4px; padding:0.75rem 1rem; font-family:'DM Sans',sans-serif; font-size:0.95rem; color:var(--gris-fonce); background:var(--blanc); transition:border-color 0.2s; }
.kb-search-wrap input:focus { outline:none; border-color:var(--accent); }
.kb-search-results { position:absolute; top:calc(100% + 4px); left:0; right:0; background:var(--blanc); border:1.5px solid var(--gris-clair); border-radius:4px; box-shadow:0 4px 16px rgba(0,0,0,0.1); z-index:50; max-height:320px; overflow-y:auto; }
.kb-search-result-item { padding:0.65rem 1rem; border-bottom:1px solid var(--gris-clair); cursor:pointer; font-size:0.88rem; transition:background 0.15s; }
.kb-search-result-item:last-child { border-bottom:none; }
.kb-search-result-item:hover { background:var(--accent-clair); }
.kb-search-result-item .sr-terme { font-weight:700; color:var(--noir-doux); }
.kb-search-result-item .sr-parent { font-size:0.78rem; color:var(--gris); margin-top:0.1rem; }
.kb-layout { display:flex; gap:2rem; align-items:flex-start; }
/* kb-nav : display:block !important indispensable — ecrase nav { display:flex } du style global */
.kb-nav { display:block !important; flex:0 0 180px; width:180px; background:var(--blanc); border:1.5px solid var(--gris-clair); border-radius:6px; overflow:hidden; position:sticky; top:80px; }
.kb-nav-label { display:block; font-size:0.68rem; font-weight:700; letter-spacing:0.12em; text-transform:uppercase; color:var(--gris); padding:0.65rem 0.85rem 0.45rem; border-bottom:1px solid var(--gris-clair); }
.kb-parent-item { display:block !important; padding:0.55rem 0.85rem; font-size:0.83rem; line-height:1.3; color:var(--gris-fonce); cursor:pointer; border-bottom:1px solid var(--gris-clair); transition:background 0.15s,color 0.15s; user-select:none; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; text-decoration:none; }
.kb-parent-item:last-child { border-bottom:none; }
.kb-parent-item:hover { background:var(--accent-clair); color:var(--accent); white-space:normal; overflow:visible; text-overflow:unset; }
.kb-parent-item.active { background:var(--accent); color:var(--blanc) !important; font-weight:700; white-space:normal; overflow:visible; text-overflow:unset; }
.kb-parent-count { float:right; font-size:0.68rem; background:var(--gris-clair); color:var(--gris); padding:0.1em 0.35em; border-radius:8px; margin-left:0.25rem; }
.kb-parent-item.active .kb-parent-count { background:rgba(255,255,255,0.25); color:var(--blanc); }
.kb-main { flex:1; min-width:0; min-height:400px; }
.kb-empty { text-align:center; padding:4rem 2rem; color:var(--gris); font-size:0.95rem; }
.kb-term-header { margin-bottom:1.5rem; }
.kb-term-header h2 { font-size:1.3rem; font-weight:700; color:var(--noir-doux); margin-bottom:0.25rem; }
.kb-term-header p { font-size:0.88rem; color:var(--gris); }
.kb-children { display:flex; flex-wrap:wrap; gap:0.5rem; margin-bottom:2rem; }
.kb-child-tag { display:inline-block; padding:0.35rem 0.85rem; background:var(--fond); border:1.5px solid var(--gris-clair); border-radius:20px; font-size:0.82rem; color:var(--gris-fonce); cursor:pointer; transition:border-color 0.2s,background 0.2s; }
.kb-child-tag:hover, .kb-child-tag.active { border-color:var(--accent); background:var(--accent-clair); color:var(--accent); }
.kb-rules-title { font-size:0.7rem; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; color:var(--gris); margin-bottom:0.75rem; }
.kb-rule-card { background:var(--blanc); border:1.5px solid var(--gris-clair); border-radius:6px; padding:1rem 1.25rem; margin-bottom:0.75rem; display:flex; align-items:flex-start; gap:1rem; }
.kb-rule-card:last-child { margin-bottom:0; }
.kb-rule-body { flex:1; min-width:0; }
.kb-rule-code { font-size:0.75rem; font-weight:700; color:var(--accent); letter-spacing:0.06em; font-family:monospace; margin-bottom:0.2rem; }
.kb-rule-desc { font-size:0.88rem; color:var(--gris-fonce); line-height:1.5; }
.kb-rule-meta { font-size:0.75rem; color:var(--gris); margin-top:0.25rem; }
.kb-rule-poids { flex-shrink:0; font-size:0.75rem; font-weight:700; color:var(--gris); white-space:nowrap; padding-top:0.1rem; }
.btn-comprendre { flex-shrink:0; background:transparent; border:1.5px solid var(--gris-clair); border-radius:4px; padding:0.3rem 0.7rem; font-family:'DM Sans',sans-serif; font-size:0.78rem; font-weight:700; color:var(--gris-fonce); cursor:pointer; white-space:nowrap; transition:border-color 0.2s,color 0.2s; }
.btn-comprendre:hover { border-color:var(--accent); color:var(--accent); }
.kb-spinner { width:24px; height:24px; border:3px solid var(--gris-clair); border-top-color:var(--accent); border-radius:50%; animation:kb-spin 0.7s linear infinite; margin:0 auto 0.75rem; }
.kb-drawer-overlay { position:fixed; inset:0; background:rgba(0,0,0,0.35); z-index:199; }
.kb-drawer { position:fixed; top:0; right:0; bottom:0; width:min(420px,92vw); background:var(--blanc); box-shadow:-4px 0 32px rgba(0,0,0,0.15); z-index:200; display:flex; flex-direction:column; transform:translateX(100%); transition:transform 0.28s cubic-bezier(0.4,0,0.2,1); }
/* D-71bis : display:flex explicite => [hidden] ignore par le navigateur (BP#24) */
.kb-drawer[hidden] { display:flex; transform:translateX(100%); }
.kb-drawer.open { transform:translateX(0); }
.kb-drawer-inner { display:flex; flex-direction:column; height:100%; }
.kb-drawer-header { display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; padding:1.25rem 1.5rem; border-bottom:1.5px solid var(--gris-clair); border-left:4px solid var(--accent); }
.kb-drawer-moteur-badge { display:inline-block; font-size:0.7rem; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; padding:0.2em 0.6em; border-radius:3px; margin-bottom:0.35rem; background:var(--accent-clair); color:var(--accent); }
.kb-drawer-header h3 { font-size:0.95rem; font-weight:700; color:var(--noir-doux); margin:0; }
.kb-drawer-close { background:none; border:none; font-size:1.5rem; line-height:1; color:var(--gris); cursor:pointer; padding:0; flex-shrink:0; transition:color 0.2s; }
.kb-drawer-close:hover { color:var(--noir); }
.kb-drawer-body { flex:1; overflow-y:auto; padding:1.5rem; font-size:0.92rem; line-height:1.7; color:var(--gris-fonce); }
.kb-loading { text-align:center; padding:3rem 1rem; color:var(--gris); }
@media(max-width:768px){ .kb-layout{flex-direction:column;} .kb-nav{flex:none !important;width:100% !important;position:static;} .kb-parent-item{white-space:normal;overflow:visible;text-overflow:unset;} }

/* ─── Page Profil ────────────────────────────────────────────────────────── */
/* DT-QC-05 — migre depuis le <style> inline (25.07.2026)                    */
.profil-section { padding:2rem var(--esp) 4rem; }
.profil-loading { text-align:center; padding:3rem 0; color:var(--gris); }
.spinner { width:36px; height:36px; border:3px solid var(--gris-clair); border-top-color:var(--accent); border-radius:50%; animation:spin 0.8s linear infinite; margin:0 auto 1rem; }
.form-legend-inline { font-size:0.78rem; color:var(--gris); margin-bottom:1rem; }
.billing-same-label { display:inline-flex; align-items:center; gap:0.6rem; font-size:0.9rem; font-weight:400; color:var(--gris-fonce); cursor:pointer; margin-bottom:0; }
.billing-same-label input[type="checkbox"] { width:16px; height:16px; flex-shrink:0; accent-color:var(--accent); cursor:pointer; }
.phone-field { display:flex; gap:0.5rem; align-items:stretch; }
.phone-prefix-select { flex:0 0 110px; width:110px; font-size:0.88rem; }
.phone-field input[type="tel"] { flex:1; min-width:0; }
.plan-banner { display:flex; justify-content:space-between; align-items:center; background:var(--noir-doux); color:var(--blanc); border-radius:6px; padding:1rem 1.5rem; margin-bottom:1.25rem; flex-wrap:wrap; gap:0.75rem; border-left:4px solid var(--accent); }
.plan-banner-left { display:flex; align-items:center; gap:0.75rem; font-size:0.9rem; flex-wrap:wrap; }
.plan-banner-right { font-size:0.78rem; color:rgba(255,255,255,0.5); display:flex; flex-direction:column; gap:0.2rem; text-align:right; }
.plan-badge { background:var(--accent); color:var(--blanc); font-size:0.72rem; font-weight:700; letter-spacing:0.1em; padding:0.2rem 0.6rem; border-radius:3px; }
.client-number { font-size:0.78rem; color:rgba(255,255,255,0.5); font-family:monospace; }
.completion-bar-wrap { background:var(--blanc); border:1.5px solid var(--gris-clair); border-radius:6px; padding:1rem 1.25rem; margin-bottom:1.25rem; }
.completion-label { display:flex; justify-content:space-between; font-size:0.82rem; font-weight:700; color:var(--gris-fonce); margin-bottom:0.5rem; }
.completion-track { background:var(--gris-clair); border-radius:20px; height:8px; overflow:hidden; }
.completion-fill { height:100%; background:var(--accent); border-radius:20px; transition:width 0.6s ease; }
.completion-hint { font-size:0.75rem; color:var(--gris); margin-top:0.4rem; margin-bottom:0; }
.stats-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(130px,1fr)); gap:1rem; margin-bottom:2rem; }
.stat-card { background:var(--blanc); border:1.5px solid var(--gris-clair); border-radius:6px; padding:1.25rem; text-align:center; }
.stat-value { font-size:1.8rem; font-weight:700; color:var(--accent); letter-spacing:-0.04em; }
.stat-label { font-size:0.75rem; color:var(--gris); margin-top:0.2rem; }
.profil-tabs { display:flex; gap:0; border-bottom:2px solid var(--gris-clair); margin-bottom:2rem; flex-wrap:wrap; }
.ptab-btn { background:none; border:none; border-bottom:2.5px solid transparent; margin-bottom:-2px; padding:0.65rem 1rem; font-family:'DM Sans',sans-serif; font-size:0.85rem; font-weight:700; color:var(--gris); cursor:pointer; transition:color 0.2s,border-color 0.2s; white-space:nowrap; }
.ptab-btn.active { color:var(--accent); border-bottom-color:var(--accent); }
.ptab-panel { display:none; }
.ptab-panel.active { display:block; }
.form-section-title { font-size:0.78rem; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; color:var(--gris); margin-bottom:1rem; padding-bottom:0.5rem; border-bottom:1px solid var(--gris-clair); }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.form-group--full { grid-column:1/-1; }
.form-group input,.form-group select { width:100%; border:1.5px solid var(--gris-clair); border-radius:4px; padding:0.65rem 0.9rem; font-family:'DM Sans',sans-serif; font-size:0.9rem; color:var(--gris-fonce); outline:none; transition:border-color 0.2s; background:var(--blanc); }
.form-group input::placeholder { color:var(--gris); font-weight:400; opacity:1; }
.form-group input:focus,.form-group select:focus { border-color:var(--accent); }
.form-group input:disabled { background:var(--fond); color:var(--gris); cursor:not-allowed; }
.form-actions { display:flex; align-items:center; gap:1rem; flex-wrap:wrap; margin-top:1.5rem; }
/* BP#24 — .btn-primary { display:inline-flex } ignorait [hidden] sans cette regle explicite
   (audit systematique 16.07.2026) */
#btn-2fa-disable[hidden] { display:none !important; }
.btn-cancel { background:transparent; color:#c62828; border:1.5px solid #e57373; border-radius:4px; padding:0.65rem 1.25rem; font-family:'DM Sans',sans-serif; font-weight:700; font-size:0.85rem; cursor:pointer; transition:all 0.2s; }
.btn-cancel:hover { background:#fce8e6; }
.btn-danger { background:#c62828; color:var(--blanc); border:none; border-radius:4px; padding:0.7rem 1.4rem; font-family:'DM Sans',sans-serif; font-weight:700; font-size:0.9rem; cursor:pointer; transition:opacity 0.2s; }
.btn-danger:hover { opacity:0.85; }
.subscription-wrap { max-width:600px; }
.sub-details { background:var(--blanc); border:1.5px solid var(--gris-clair); border-radius:6px; padding:1.5rem; margin:1rem 0 1.5rem; }
.sub-item { display:flex; justify-content:space-between; padding:0.6rem 0; border-bottom:1px solid var(--gris-clair); font-size:0.9rem; }
.sub-item:last-child { border-bottom:none; }
.sub-label { color:var(--gris); }
.sub-value { font-weight:700; color:var(--noir); }
.cancel-zone { background:#fff5f5; border:1.5px solid #fca5a5; border-radius:6px; padding:1.5rem; margin-top:1.5rem; }
.cancel-zone h4 { color:#c62828; margin-bottom:0.5rem; }
.cancel-zone p { font-size:0.88rem; color:var(--gris-fonce); margin-bottom:1rem; }
.cancel-confirm { background:#fff5f5; border:1.5px solid #f87171; border-radius:6px; padding:1.5rem; margin-top:1rem; }
.cancel-confirm p { font-size:0.9rem; margin-bottom:0.75rem; }
.cancel-confirm-actions { display:flex; gap:1rem; flex-wrap:wrap; }
.tfa-status { display:inline-flex; align-items:center; gap:0.5rem; padding:0.5rem 1rem; border-radius:4px; font-size:0.85rem; font-weight:700; }
.tfa-off { background:#fff3e0; color:#b34000; }
.tfa-on  { background:#e6f4ea; color:#1e7e34; }
.inv-table { width:100%; border-collapse:collapse; font-size:0.88rem; }
.inv-table th { text-align:left; font-size:0.7rem; letter-spacing:0.08em; text-transform:uppercase; color:var(--gris); border-bottom:1.5px solid var(--gris-clair); padding:0.5rem 0.6rem; }
.inv-table td { padding:0.65rem 0.6rem; border-bottom:1px solid var(--gris-clair); vertical-align:middle; }
.inv-table tr:last-child td { border-bottom:none; }
.inv-doctype { color:var(--gris); font-size:0.76rem; }
.inv-badge { font-size:0.68rem; font-weight:700; letter-spacing:0.04em; padding:0.2rem 0.55rem; border-radius:3px; white-space:nowrap; }
.inv-paid    { background:#e6f4ea; color:#1e7e34; }
.inv-issued  { background:#fff3e0; color:#b34000; }
.inv-credited{ background:#fce8e6; color:#c62828; }
.inv-dl { color:var(--accent); font-weight:700; text-decoration:none; white-space:nowrap; }
.inv-dl:hover { text-decoration:underline; }
@media(max-width:600px){ .form-row{grid-template-columns:1fr;} .plan-banner{flex-direction:column;align-items:flex-start;} .plan-banner-right{text-align:left;} .profil-tabs{overflow-x:auto;} .phone-field{flex-direction:column;} .phone-prefix-select{width:100%;} }

/* ─── Page Admin Exemptions ──────────────────────────────────────────────── */
/* DT-QC-05 — migre depuis le <style> inline (25.07.2026)                    */
.ex-stats-bar { display:flex; gap:1.5rem; flex-wrap:wrap; margin-bottom:1.5rem; padding:1rem 1.25rem; background:var(--blanc); border:1.5px solid var(--gris-clair); border-radius:8px; font-size:0.88rem; }
.ex-stat-chip { display:flex; flex-direction:column; align-items:center; gap:0.1rem; }
.ex-stat-chip strong { font-size:1.35rem; font-weight:800; color:var(--accent); }
.stat-chip span { color:var(--gris); font-size:0.76rem; }
.ex-tabs { display:flex; gap:0.5rem; margin-bottom:1.25rem; border-bottom:2px solid var(--gris-clair); }
.ex-tab { padding:0.6rem 1.25rem; border:1.5px solid transparent; border-bottom:none; border-radius:6px 6px 0 0; background:var(--fond); cursor:pointer; font-size:0.88rem; font-family:'DM Sans',sans-serif; font-weight:600; color:var(--gris); }
.ex-tab.active { background:var(--blanc); border-color:var(--gris-clair); border-bottom:2px solid var(--blanc); color:var(--accent); margin-bottom:-2px; }
.ex-tab-content { display:none; }
.ex-tab-content.active { display:block; }
.ex-filters { display:flex; gap:0.75rem; align-items:center; margin-bottom:1.25rem; flex-wrap:wrap; }
.ex-filters select,.ex-filters input { padding:0.45rem 0.75rem; border:1.5px solid var(--gris-clair); border-radius:6px; font-family:'DM Sans',sans-serif; font-size:0.88rem; background:var(--blanc); }
.ex-form-card { background:var(--blanc); border:1.5px solid var(--gris-clair); border-radius:10px; padding:1.75rem; max-width:640px; }
.ex-form-card h3 { margin:0 0 1.25rem; font-size:1.05rem; }
.ex-form-group { margin-bottom:1.1rem; }
.ex-form-group label { display:block; font-weight:600; font-size:0.88rem; margin-bottom:0.35rem; }
.ex-form-group input,.ex-form-group select,.ex-form-group textarea { width:100%; padding:0.5rem 0.75rem; border:1.5px solid var(--gris-clair); border-radius:6px; font-family:'DM Sans',sans-serif; font-size:0.88rem; box-sizing:border-box; }
.ex-checkbox-label { display:flex; gap:0.75rem; align-items:flex-start; cursor:pointer; font-weight:400; }
.ex-checkbox-label input { margin-top:0.2rem; width:16px; height:16px; flex-shrink:0; }

/* ============================================================
   PAGE AIDE / GUIDE UTILISATEUR
   ============================================================ */
.aide-section { padding:2.5rem 0 4rem; }
.aide-nav { display:flex; flex-wrap:wrap; gap:0.5rem; margin-bottom:2.5rem; padding:1rem 1.25rem; background:var(--gris-bg); border-radius:8px; }
.aide-nav-link { font-size:0.85rem; font-weight:600; color:var(--accent); text-decoration:none; padding:0.3rem 0.75rem; border-radius:20px; border:1.5px solid var(--accent-clair); transition:background 0.15s,color 0.15s; white-space:nowrap; }
.aide-nav-link:hover { background:var(--accent); color:#fff; }
.aide-bloc { margin-bottom:3rem; padding-bottom:2.5rem; border-bottom:1px solid var(--gris-clair); }
.aide-bloc:last-child { border-bottom:none; }
.aide-bloc h2 { font-size:1.3rem; font-weight:700; color:var(--noir-doux); margin-bottom:1rem; padding-bottom:0.5rem; border-left:4px solid var(--accent); padding-left:0.75rem; }
.aide-bloc h3 { font-size:1rem; font-weight:700; color:var(--noir-doux); margin:1.5rem 0 0.5rem; }
.aide-steps { padding-left:1.25rem; color:var(--gris-fonce); line-height:1.8; }
.aide-steps li { margin-bottom:0.35rem; }
.aide-list { padding-left:1.25rem; color:var(--gris-fonce); line-height:1.8; list-style:disc; }
.aide-list li { margin-bottom:0.35rem; }
.aide-tip { margin:1rem 0; padding:0.75rem 1rem; background:var(--accent-clair); border-left:3px solid var(--accent); border-radius:0 6px 6px 0; font-size:0.92rem; color:var(--gris-fonce); }
.aide-tip--warning { background:#fff8e1; border-left-color:#f59e0b; }
.aide-table { width:100%; border-collapse:collapse; font-size:0.9rem; margin:1rem 0; }
.aide-table th { background:var(--gris-bg); padding:0.6rem 0.75rem; text-align:left; font-weight:700; font-size:0.8rem; letter-spacing:0.05em; text-transform:uppercase; color:var(--gris); border-bottom:2px solid var(--gris-clair); }
.aide-table td { padding:0.6rem 0.75rem; border-bottom:1px solid var(--gris-clair); color:var(--gris-fonce); vertical-align:top; }
.aide-table tr:last-child td { border-bottom:none; }
.faq-liste { display:flex; flex-direction:column; gap:1rem; }
.faq-item { padding:1rem 1.25rem; background:var(--gris-bg); border-radius:8px; }
.faq-item h3 { font-size:0.95rem; font-weight:700; color:var(--noir-doux); margin:0 0 0.4rem; }
.faq-item p { font-size:0.9rem; color:var(--gris-fonce); line-height:1.6; margin:0; }
.aide-contact { background:var(--accent-clair); border-radius:10px; padding:1.5rem !important; border:none !important; }
.aide-contact h2 { border-left:none !important; padding-left:0 !important; }
@media(max-width:768px){ .aide-nav { gap:0.35rem; } .aide-nav-link { font-size:0.78rem; padding:0.25rem 0.6rem; } .aide-table { font-size:0.82rem; } }
.g-user-info { margin-top:0.5rem; font-size:0.82rem; padding:0.5rem 0.75rem; border-radius:6px; background:var(--fond); }
.g-result { margin-top:1rem; padding:0.75rem 1rem; border-radius:6px; font-size:0.88rem; display:none; }
.g-result.ok  { background:#e8f5e9; color:#1b5e20; }
.g-result.err { background:#ffebee; color:#b71c1c; }
.btn-revoke { background:#fff; border:1.5px solid #c62828; color:#c62828; border-radius:4px; padding:0.2rem 0.6rem; font-size:0.75rem; cursor:pointer; font-weight:700; }
.log-action { display:inline-block; padding:0.15rem 0.5rem; border-radius:4px; font-size:0.75rem; font-weight:700; background:var(--fond); }

/* Article meta — auteur + date (E-E-A-T Lot 8) */
.article-meta { font-size: 0.875rem; opacity: 0.75; margin-top: 0.5rem; }