/* Nocturne — nouveau design system (refonte), adapté de
   mockups/refonte/_ds/.../styles.css. Voir mockups/refonte/_ds/.../readme.md
   pour la doctrine complète. */

/* Police Inter auto-hébergée (voir assets/fonts/) plutôt que chargée depuis Google
   Fonts — évite le transfert de l'IP du visiteur vers un tiers à chaque page, sans
   attendre de consentement (voir js/cookie-consent.js et l'audit "cookies" du
   21 août 2026). "Latin" + "latin-ext" suffisent : ce site n'a que du contenu
   français, pas besoin des autres blocs Unicode (cyrillique, grec...) que Google
   Fonts sert par défaut. Fichiers variables (poids 400 à 700 dans le même .woff2,
   d'où la plage plutôt qu'une déclaration par graisse) — tels que fournis par Google
   Fonts, seulement rehébergés ici.  */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../assets/fonts/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../assets/fonts/inter-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --color-bg: #161826;
  --color-surface: #232532;
  --color-text: #e9e9ed;
  --color-accent: #9184d9;
  --color-accent-2: #a7a1db;
  --color-divider: color-mix(in srgb, #e9e9ed 16%, transparent);

  --color-neutral-100: #f3f5fe;
  --color-neutral-200: #e4e7f5;
  --color-neutral-300: #cfd3e5;
  --color-neutral-400: #b2b6ca;
  --color-neutral-500: #9397ab;
  --color-neutral-600: #75798c;
  --color-neutral-700: #595d6c;
  --color-neutral-800: #3f424d;
  --color-neutral-900: #292b31;

  --color-accent-100: #f5f4ff;
  --color-accent-200: #e7e5fe;
  --color-accent-300: #d2cefd;
  --color-accent-400: #b5abfc;
  --color-accent-500: #968ae0;
  --color-accent-600: #796cbf;
  --color-accent-700: #5d5294;
  --color-accent-800: #423a6a;
  --color-accent-900: #2b2741;

  --color-accent-2-100: #f5f4ff;
  --color-accent-2-200: #e7e5fe;
  --color-accent-2-300: #d2cefd;
  --color-accent-2-400: #b5afe8;
  --color-accent-2-500: #9690c9;
  --color-accent-2-600: #7972a9;
  --color-accent-2-700: #5c5783;
  --color-accent-2-800: #423e5d;
  --color-accent-2-900: #2b293a;

  --color-section: #262a60;
  --color-section-glow: #353b80;
  --color-section-ghost: #4c5397;

  --font-heading: "Inter", system-ui, sans-serif;
  --font-heading-weight: 500;
  --font-body: "Inter", system-ui, sans-serif;

  --space-1: 2.8px;
  --space-2: 5.6px;
  --space-3: 8.4px;
  --space-4: 11.2px;
  --space-5: 14px;
  --space-6: 16.8px;
  --space-7: 19.6px;
  --space-8: 22.4px;

  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 14px;

  --shadow-sm: 0 0 0 1px #3f424d;
  --shadow-md: 0 0 0 1px #595d6c, 0 6px 18px rgba(0,0,0,0.55);
  --shadow-lg: 0 0 0 1px #9397ab, 0 16px 40px rgba(0,0,0,0.65);
}

/* Espace admin — mêmes composants que le site public (bouton, carte, tag, champ,
   dialog…), mais accent ambre plutôt que violet, pour signaler visuellement
   "espace interne" sans dupliquer aucune règle. Voir mockups/refonte/Admin*.dc.html. */
.nocturne-admin {
  --color-accent: #c88a46;
  --color-accent-2: #c88a46;

  --color-accent-100: #fbf3e8;
  --color-accent-200: #f3ddb9;
  --color-accent-300: #e3b67e;
  --color-accent-400: #d6a563;
  --color-accent-500: #c88a46;
  --color-accent-600: #a8713a;
  --color-accent-700: #86592e;
  --color-accent-800: #614022;
  --color-accent-900: #3d2916;

  --color-accent-2-100: #fbf3e8;
  --color-accent-2-200: #f3ddb9;
  --color-accent-2-300: #e3b67e;
  --color-accent-2-400: #d6a563;
  --color-accent-2-500: #c88a46;
  --color-accent-2-600: #a8713a;
  --color-accent-2-700: #86592e;
  --color-accent-2-800: #614022;
  --color-accent-2-900: #3d2916;
}

body { background: var(--color-bg); color: var(--color-text); font-family: var(--font-body); }
* { box-sizing: border-box; }
body { font-size: 15px; line-height: 1.55; font-weight: 400; }
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  line-height: 1.12; letter-spacing: -0.015em; margin: 0 0 var(--space-2);
}
h1 { font-size: 42px; }
h2 { font-size: 32px; }
h3 { font-size: 25px; }
h4 { font-size: 20px; }
h5 { font-size: 16px; }
h6 { font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; }
p { margin: 0 0 var(--space-3); }
a { color: var(--color-accent); text-underline-offset: 3px; }
a:hover { color: var(--color-accent-400); }
img { display: block; max-width: 100%; }
.text-muted { color: color-mix(in srgb, var(--color-text) 55%, transparent); }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
/* Lien d'évitement (A11Y-03) — voir js/skip-link.js : caché hors écran par défaut,
   visible seulement au focus clavier (Tab), pour sauter le chrome commun
   (en-tête, nav) sans devoir le retraverser à chaque page. */
.skip-link {
  position: absolute; top: -48px; left: 8px; z-index: 10000;
  background: var(--color-accent); color: #ffffff;
  padding: 10px 18px; border-radius: var(--radius-md);
  font-size: 14px; font-weight: 600; text-decoration: none;
  transition: top 0.15s ease;
}
.skip-link:focus-visible { top: 8px; outline: 2px solid #ffffff; outline-offset: 2px; }
::selection { background: color-mix(in srgb, var(--color-accent) 30%, transparent); }

.lighten { mix-blend-mode: lighten; background-color: transparent; }

.hr {
  height: 1px; border: 0; margin: var(--space-4) 0;
  background: linear-gradient(to right,
    transparent, var(--color-divider) 48px,
    var(--color-divider) calc(100% - 48px), transparent);
}

/* — buttons — */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  cursor: pointer; text-decoration: none;
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 14px; line-height: 1.2; color: var(--color-text);
  background: transparent; border: 1px solid transparent;
  padding: var(--space-2) calc(var(--space-3) * 1.2);
  border-radius: var(--radius-md);
}
.btn svg, .btn i { display: block; }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
.btn-primary { color: var(--color-accent); border-color: var(--color-accent); }
.btn-primary:hover { background: color-mix(in srgb, var(--color-accent) 12%, transparent); }
.btn-primary:active { background: color-mix(in srgb, var(--color-accent) 22%, transparent); }
.btn-secondary { border-color: var(--color-divider); }
.btn-secondary:hover { background: color-mix(in srgb, var(--color-text) 7%, transparent); }
.btn-secondary:active { background: color-mix(in srgb, var(--color-text) 14%, transparent); }
.btn-ghost { color: var(--color-accent); padding-inline: var(--space-1); }
.btn-ghost:hover { background: color-mix(in srgb, var(--color-accent) 10%, transparent); }
.btn-ghost:active { background: color-mix(in srgb, var(--color-accent) 18%, transparent); }
.btn-icon { width: 36px; height: 36px; padding: 0; }
.btn-block { width: 100%; margin-top: var(--space-2); }

/* Balayage diagonal au survol des CTA (accueil, header). Un pseudo-élément
   plus large que le bouton et incliné (skew) glisse via transform plutôt que
   via background-position : contrairement à un dégradé positionné en %, ça ne
   dépend pas de la largeur exacte du bouton, donc le balayage couvre toujours
   le bouton en entier au lieu de s'arrêter à mi-chemin. */
.sweep-btn {
  position: relative; overflow: hidden; z-index: 0;
  transition: color .35s ease, border-color .35s ease;
}
.sweep-btn > * { position: relative; z-index: 1; }
.sweep-btn::before {
  content: ''; position: absolute; top: 0; bottom: 0; left: -25%; width: 150%;
  background: var(--color-accent);
  transform: translateX(-100%) skewX(-20deg);
  transition: transform .45s ease;
  z-index: 0;
}
.sweep-btn:hover::before { transform: translateX(0) skewX(-20deg); }
.sweep-btn.btn-secondary:hover { color: var(--color-bg); border-color: var(--color-accent); }
.sweep-btn.btn-primary:hover { color: var(--color-bg); }

/* — forms — */
.field > label {
  display: block; font-size: 12px; margin-bottom: 5px;
  color: color-mix(in srgb, var(--color-text) 70%, transparent);
}
.input {
  width: 100%; min-height: 36px; padding: 6px 10px; font: inherit;
  font-size: 14px; color: var(--color-text); caret-color: var(--color-accent);
  background: var(--color-surface);
  border: 1px solid var(--color-divider); border-radius: var(--radius-md);
}
.input:hover { border-color: color-mix(in srgb, var(--color-text) 62%, transparent); }
.input:focus-visible { border-color: var(--color-accent); outline-offset: 0; }
/* Champ généré automatiquement (ex. numéro de devis/facture) : toujours un <input>
   normal (sélectionnable/copiable), jamais disabled — readonly seulement. */
.input[readonly] { opacity: .72; cursor: default; }
.input[readonly]:hover { border-color: var(--color-divider); }
textarea.input { min-height: 90px; resize: vertical; }
.radio { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-size: 14px; }
.radio input, .seg-opt input {
  position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none;
}
.radio .dot {
  width: 16px; height: 16px; flex: none; border-radius: 50%;
  border: 1.5px solid var(--color-divider);
}
.radio:hover .dot { border-color: var(--color-accent); }
.radio input:checked + .dot {
  border-color: var(--color-accent); background: var(--color-accent);
  box-shadow: inset 0 0 0 4px var(--color-bg);
}
.radio input:focus-visible + .dot { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.seg {
  display: inline-flex; overflow: hidden;
  border: 1px solid var(--color-divider); border-radius: var(--radius-md);
}
.seg-opt {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 12px; font-size: 13px; cursor: pointer;
}
.seg-opt + .seg-opt { border-left: 1px solid var(--color-divider); }
.seg-opt:has(input:checked) { color: var(--color-accent); box-shadow: inset 0 0 0 1px var(--color-accent); }
.seg-opt:not(:has(input:checked)):hover { background: color-mix(in srgb, var(--color-text) 7%, transparent); }
.seg-opt:has(input:focus-visible) { outline: 2px solid var(--color-accent); outline-offset: -2px; }

/* — cards — */
.card {
  display: flex; flex-direction: column; gap: var(--space-2);
  padding: var(--space-3); border-radius: var(--radius-md); background: var(--color-surface);
}
.card-kicker { font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-accent); }
.card-title {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 17px; line-height: 1.2;
}
.card-body { margin: 0; font-size: 13px; opacity: 0.8; flex: 1; }
.card-meta {
  display: flex; align-items: center; gap: 6px; font-size: 11px;
  color: color-mix(in srgb, var(--color-text) 62%, transparent);
}
.elev-sm { box-shadow: var(--shadow-sm); }
.elev-md { box-shadow: var(--shadow-md); }
.elev-lg { box-shadow: var(--shadow-lg); }

/* — tags — */
.tag {
  display: inline-flex; align-items: center; font-size: 11px;
  letter-spacing: 0.02em; padding: 3px 10px;
  border-radius: calc(var(--radius-md) * 0.75);
}
.tag-accent { background: var(--color-accent-800); color: var(--color-accent-100); }
.tag-accent-2 { background: var(--color-accent-2-800); color: var(--color-accent-2-100); }
.tag-neutral { background: var(--color-neutral-800); color: var(--color-neutral-100); }
.tag-outline { border: 1px solid var(--color-accent); color: var(--color-accent); }

/* — navigation — */
.nav { display: flex; align-items: center; gap: var(--space-4); padding: var(--space-3) var(--space-4); }
.nav-brand { font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: 18px; margin-right: auto; }
.nav a { color: inherit; text-decoration: none; font-size: 14px; }
.nav a:hover, .nav a[aria-current='page'] { color: var(--color-accent); }

/* — dialog — */
.dialog-backdrop {
  position: fixed; inset: 0; display: grid; place-items: center;
  padding: var(--space-4);
  background: color-mix(in srgb, var(--color-neutral-900) 50%, transparent);
}
.dialog {
  width: min(440px, 100%); display: flex; flex-direction: column; gap: var(--space-3);
  padding: var(--space-4); border-radius: var(--radius-lg);
  background: var(--color-surface); box-shadow: var(--shadow-lg);
}
.dialog-title { font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: 20px; }
.dialog-body { font-size: 14px; opacity: 0.85; }
.dialog-actions { display: flex; justify-content: flex-end; gap: var(--space-2); margin-top: var(--space-2); }

/* ══════════════════════════════════════════════════════════════════════
   Page : Accueil (refonte)
   ══════════════════════════════════════════════════════════════════ */

.rf-header {
  position: sticky; top: 0; z-index: 30;
  background: color-mix(in srgb, var(--color-bg) 55%, transparent);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  border-bottom: 1px solid color-mix(in srgb, var(--color-neutral-100) 10%, transparent);
}
.rf-nav { max-width: 1400px; margin: 0 auto; padding-inline: 28px; padding-block: 16px; gap: 14px; }
.rf-brand { display: flex; align-items: center; gap: 8px; text-decoration: none; color: inherit; margin-right: 8px; }
.rf-brand-mark {
  width: 32px; height: 32px; border-radius: var(--radius-md); background: var(--color-accent-900);
  display: flex; align-items: center; justify-content: center; color: var(--color-accent-300); flex: none;
}

.rf-search { position: relative; flex: 1; max-width: 340px; min-width: 160px; margin-left: auto; margin-right: 24px; }
.rf-search-icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); opacity: .5; font-size: 15px; pointer-events: none; }
.rf-search input { padding-left: 34px; min-height: 42px; font-size: 14.5px; background: color-mix(in srgb, var(--color-surface) 55%, transparent); backdrop-filter: blur(6px); }
@media (max-width: 1080px) {
  .rf-search { display: none; }
  .rf-tools-menu { margin-left: auto; }
}

.rf-suggestions {
  position: absolute; top: 100%; left: 0; right: 0; margin-top: 8px;
  background: color-mix(in srgb, var(--color-surface) 85%, transparent);
  backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px);
  border: 1px solid color-mix(in srgb, var(--color-neutral-100) 12%, transparent);
  border-radius: var(--radius-md); box-shadow: var(--shadow-lg); padding: 6px; z-index: 31;
  display: flex; flex-direction: column; gap: 2px;
}
.rf-suggestions[hidden] { display: none; }
.rf-suggestion {
  display: flex; align-items: center; gap: 8px; padding: 8px; border-radius: var(--radius-sm);
  text-decoration: none; color: var(--color-text);
}
.rf-suggestion:hover { background: color-mix(in srgb, var(--color-accent) 12%, transparent); color: var(--color-accent); }
.rf-suggestion i { color: var(--color-accent); flex: none; }
.rf-suggestion-text { min-width: 0; overflow: hidden; }
.rf-suggestion-title { display: block; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rf-suggestion-cat { display: block; font-size: 11px; color: color-mix(in srgb, var(--color-text) 55%, transparent); white-space: nowrap; }

.rf-tools-menu { position: relative; }
.rf-tools-btn {
  display: inline-flex; align-items: center; gap: 6px; background: transparent; border: none;
  border-radius: var(--radius-md); color: var(--color-text); font: inherit; font-size: 14px; cursor: pointer;
  padding: 8px 12px; margin: -8px -12px; white-space: nowrap; transition: background .2s ease, color .2s ease;
}
.rf-tools-btn[aria-expanded="true"] { background: color-mix(in srgb, var(--color-accent) 18%, transparent); color: var(--color-accent); }
.rf-tools-panel {
  position: absolute; top: 100%; right: 0; margin-top: 16px; width: 560px;
  background: color-mix(in srgb, var(--color-surface) 78%, transparent);
  backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px);
  border: 1px solid color-mix(in srgb, var(--color-neutral-100) 12%, transparent);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); padding: 16px;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 6px;
  z-index: 31; transform-origin: top right; max-width: calc(100vw - 32px);
  opacity: 0; transform: translateY(-8px) scale(0.97); pointer-events: none;
  transition: opacity .25s ease, transform .25s ease;
}
.rf-tools-panel.is-open { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }
.rf-tools-cat {
  display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: var(--radius-md);
  text-decoration: none; color: var(--color-text);
}
.rf-tools-cat:hover { background: color-mix(in srgb, var(--color-accent) 12%, transparent); color: var(--color-accent); }
.rf-tools-cat-icon {
  width: 32px; height: 32px; border-radius: var(--radius-md); background: var(--color-accent-900);
  color: var(--color-accent-300); display: flex; align-items: center; justify-content: center; font-size: 15px; flex: none;
}
.rf-tools-cat-text { display: flex; flex-direction: column; min-width: 0; }
.rf-tools-cat-title { font-size: 13.5px; line-height: 1.3; white-space: nowrap; }
.rf-tools-cat-count { font-size: 11.5px; line-height: 1.3; color: color-mix(in srgb, var(--color-text) 55%, transparent); white-space: nowrap; }
.rf-tools-panel-all {
  grid-column: 1 / -1; display: flex; align-items: center; justify-content: center; gap: 6px;
  margin-top: 6px; padding: 10px; border-radius: var(--radius-md); text-decoration: none;
  color: var(--color-accent); font-size: 13px; border-top: 1px solid color-mix(in srgb, var(--color-neutral-100) 10%, transparent);
}

.rf-cta-group { display: flex; align-items: center; gap: 10px; }
.rf-cta-group .btn { text-decoration: none; white-space: nowrap; flex: none; padding: 9px 16px; font-size: 13.5px; }
@media (max-width: 720px) { .rf-cta-group .btn span { display: none; } }
@media (max-width: 640px) {
  .rf-nav { gap: 10px; padding-inline: 16px; }
  .rf-brand .nav-brand { display: none; }
  .rf-nav-blog { display: none; }
}

.rf-aurora { position: absolute; inset: -120px; pointer-events: none; z-index: 0; }
.rf-aurora div { position: absolute; border-radius: 50%; filter: blur(10px); }
@keyframes rf-aurora-1 { 0%, 100% { transform: translate(0,0) scale(1); } 50% { transform: translate(60px,-40px) scale(1.1); } }
@keyframes rf-aurora-2 { 0%, 100% { transform: translate(0,0) scale(1); } 50% { transform: translate(-70px,50px) scale(1.06); } }
@keyframes rf-aurora-3 { 0%, 100% { transform: translate(0,0) scale(1); } 50% { transform: translate(40px,60px) scale(1.12); } }
.rf-aurora-1 { top: -60px; right: 8%; width: 520px; height: 520px; background: radial-gradient(circle, color-mix(in srgb, var(--color-accent-700) 55%, transparent) 0%, transparent 70%); animation: rf-aurora-1 24s ease-in-out infinite; }
.rf-aurora-2 { bottom: -80px; left: 2%; width: 460px; height: 460px; background: radial-gradient(circle, color-mix(in srgb, var(--color-section-glow) 60%, transparent) 0%, transparent 70%); animation: rf-aurora-2 29s ease-in-out infinite; }
.rf-aurora-3 { top: 20%; left: 38%; width: 380px; height: 380px; background: radial-gradient(circle, color-mix(in srgb, var(--color-accent-800) 45%, transparent) 0%, transparent 70%); animation: rf-aurora-3 26s ease-in-out infinite; }
.rf-aurora-closing { top: 10%; left: 20%; width: 420px; height: 420px; background: radial-gradient(circle, color-mix(in srgb, var(--color-accent-700) 45%, transparent) 0%, transparent 70%); animation: rf-aurora-2 27s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .rf-aurora div { animation: none !important; } }

.rf-hero { position: relative; overflow: hidden; padding: 96px 32px 88px; }
.rf-hero-inner { position: relative; z-index: 1; max-width: 1280px; margin: 0 auto; text-align: left; }
.rf-hero-kicker { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: var(--color-accent); margin-bottom: 20px; }
.rf-hero h1 { margin: 0 0 20px; font-size: clamp(34px, 5vw, 58px); line-height: 1.08; max-width: 20ch; }
.rf-hero p { margin: 0 0 32px; font-size: 17px; line-height: 1.6; max-width: 52ch; color: color-mix(in srgb, var(--color-text) 80%, transparent); }
.rf-hero-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.rf-hero-actions .btn { text-decoration: none; padding: 12px 22px; font-size: 15px; white-space: nowrap; }

.rf-reveal { opacity: 0; transform: translateY(28px); transition: opacity .7s ease, transform .7s ease; }
.rf-reveal.is-revealed { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) { .rf-reveal { opacity: 1; transform: none; transition: none; } }

.rf-section { max-width: 1280px; margin: 0 auto; padding: 24px 32px 88px; }
.rf-eyebrow { display: block; font-size: 13px; font-weight: 400; letter-spacing: .06em; text-transform: uppercase; color: var(--color-accent); margin-bottom: 16px; }

.rf-features { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.rf-feature-num { margin: 0 0 10px; font-size: 13px; color: var(--color-accent); font-family: var(--font-heading); }
.rf-feature h3 { margin: 0 0 8px; font-size: 18px; display: flex; align-items: center; gap: 8px; }
.rf-feature h3 i { color: var(--color-accent); }
.rf-feature p { margin: 0; font-size: 14px; line-height: 1.55; color: color-mix(in srgb, var(--color-text) 75%, transparent); }
@media (max-width: 900px) { .rf-features { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .rf-features { grid-template-columns: 1fr; } }

.rf-section-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 20px; flex-wrap: wrap; gap: 8px; }
.rf-section-head h2 { margin: 0; font-size: 26px; }
.rf-section-head a { font-size: 14px; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; }

.rf-categories { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.rf-cat-card {
  text-decoration: none; color: inherit;
  background: color-mix(in srgb, var(--color-surface) 55%, transparent);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border: 1px solid color-mix(in srgb, var(--color-neutral-100) 10%, transparent);
  transition: border-color .15s, transform .15s;
}
.rf-cat-card:hover { border-color: color-mix(in srgb, var(--color-accent) 45%, transparent); transform: translateY(-1px); color: inherit; }
.rf-cat-card-icon {
  width: 40px; height: 40px; border-radius: var(--radius-md); background: var(--color-accent-900);
  color: var(--color-accent-300); display: flex; align-items: center; justify-content: center; font-size: 18px; flex: none;
}

.rf-freemium { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; }
.rf-freemium-card {
  background: color-mix(in srgb, var(--color-surface) 50%, transparent);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border: 1px solid color-mix(in srgb, var(--color-neutral-100) 10%, transparent);
  gap: 14px;
}
.rf-freemium-card > .tag { align-self: flex-start; white-space: nowrap; }
.rf-freemium-card h3 { margin: 0; }
.rf-freemium-list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; font-size: 14px; color: color-mix(in srgb, var(--color-text) 82%, transparent); }
.rf-freemium-list li { display: flex; gap: 8px; }
.rf-freemium-list i { color: var(--color-accent); flex: none; margin-top: 2px; }

.rf-closing { position: relative; overflow: hidden; padding: 72px 32px 88px; text-align: center; }
.rf-closing-inner { position: relative; z-index: 1; max-width: 520px; margin: 0 auto; }
.rf-closing h2 { margin: 0 0 12px; font-size: 28px; }
.rf-closing p { margin: 0 0 24px; font-size: 15px; color: color-mix(in srgb, var(--color-text) 78%, transparent); }
.rf-closing-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.rf-closing-actions .btn { text-decoration: none; padding: 12px 22px; font-size: 15px; white-space: nowrap; }

.rf-footer { border-top: 1px solid var(--color-divider); padding: 56px 32px 24px; }
.rf-footer-inner { max-width: 1280px; margin: 0 auto; }
.rf-footer-top { display: flex; justify-content: space-between; gap: 40px; flex-wrap: wrap; margin-bottom: 36px; }
.rf-footer-brand { max-width: 320px; }
.rf-footer-brand-row { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.rf-footer-brand-mark {
  width: 26px; height: 26px; border-radius: var(--radius-md); background: var(--color-accent-900);
  color: var(--color-accent-300); display: flex; align-items: center; justify-content: center; font-size: 13px; flex: none;
}
.rf-footer-brand p { margin: 0; font-size: 13.5px; line-height: 1.6; color: color-mix(in srgb, var(--color-text) 70%, transparent); }
.rf-footer-cols { display: flex; gap: 56px; flex-wrap: wrap; }
.rf-footer-col { display: flex; flex-direction: column; gap: 10px; }
.rf-footer-col-title { margin: 0 0 2px; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: color-mix(in srgb, var(--color-text) 55%, transparent); }
.rf-footer-col a { font-size: 13.5px; text-decoration: none; color: var(--color-text); }
.rf-footer-col button { font: inherit; font-size: 13.5px; text-decoration: none; color: var(--color-text); background: none; border: none; padding: 0; margin: 0; cursor: pointer; text-align: left; }
.rf-footer-copyright { margin: 0; text-align: center; font-size: 13px; color: color-mix(in srgb, var(--color-text) 55%, transparent); }

/* ══════════════════════════════════════════════════════════════════════
   Page : Tous les outils (refonte)
   ══════════════════════════════════════════════════════════════════ */

.rf-tools-main { max-width: 1280px; margin: 0 auto; padding: 0 32px 96px; }

.rf-tools-intro { padding: 48px 0 32px; max-width: 680px; }
.rf-breadcrumb { margin: 0 0 16px; font-size: 13px; color: color-mix(in srgb, var(--color-text) 60%, transparent); }
.rf-breadcrumb a { color: inherit; text-decoration: none; }
.rf-tools-intro h1 { font-size: clamp(30px, 3.6vw, 42px); line-height: 1.08; margin: 0 0 16px; }
.rf-tools-intro-desc { font-size: 16px; line-height: 1.6; color: color-mix(in srgb, var(--color-text) 78%, transparent); margin: 0 0 16px; }
.rf-legend { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.rf-legend-text { font-size: 13px; color: color-mix(in srgb, var(--color-text) 65%, transparent); margin-right: 12px; }

.rf-jumpnav {
  position: sticky; top: 65px; z-index: 20;
  background: color-mix(in srgb, var(--color-bg) 65%, transparent);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  padding: 12px 0; margin-bottom: 32px;
  border-bottom: 1px solid color-mix(in srgb, var(--color-neutral-100) 10%, transparent);
  display: flex; gap: 8px; flex-wrap: wrap;
}
.rf-jumpnav[hidden] { display: none; }
.rf-jumpnav-pill {
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border-radius: 999px;
  background: color-mix(in srgb, var(--color-surface) 55%, transparent);
  backdrop-filter: blur(10px);
  border: 1px solid color-mix(in srgb, var(--color-neutral-100) 12%, transparent);
  text-decoration: none; color: var(--color-text); font-size: 13px; white-space: nowrap; flex: none;
}
.rf-jumpnav-pill i { color: var(--color-accent); font-size: 14px; }
.rf-jumpnav-pill:hover { color: var(--color-accent); border-color: color-mix(in srgb, var(--color-accent) 45%, transparent); }

.rf-noresults { text-align: center; padding: 64px 24px; background: var(--color-surface); border-radius: var(--radius-lg); margin-bottom: 32px; }
.rf-noresults[hidden] { display: none; }
.rf-noresults > i { font-size: 28px; color: var(--color-accent); margin-bottom: 12px; display: inline-block; }
.rf-noresults h3 { margin: 0 0 6px; }
.rf-noresults > p { margin: 0 0 24px; color: color-mix(in srgb, var(--color-text) 70%, transparent); font-size: 14px; }
.rf-noresults-suggestions { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
.rf-noresults-suggestion {
  display: flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: var(--radius-md);
  text-decoration: none; color: var(--color-text);
  background: color-mix(in srgb, var(--color-surface) 70%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-neutral-100) 12%, transparent); font-size: 13.5px;
}
.rf-noresults-suggestion i { color: var(--color-accent); }
.rf-noresults-suggestion:hover { border-color: var(--color-accent); color: var(--color-accent); }

.rf-tools-section { padding: 32px 0; scroll-margin-top: 130px; }
.rf-tools-section[hidden] { display: none; }
.rf-tools-section-head { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; }
.rf-tools-section-head h2 { margin: 0; font-size: 24px; }
.rf-tools-section-icon {
  width: 44px; height: 44px; border-radius: var(--radius-md); background: var(--color-accent-900);
  color: var(--color-accent-300); display: flex; align-items: center; justify-content: center; font-size: 20px; flex: none;
}
.rf-tools-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.rf-tool-slot[hidden] { display: none; }
.rf-tool-card {
  text-decoration: none; color: inherit; cursor: pointer;
  background: color-mix(in srgb, var(--color-surface) 55%, transparent);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border: 1px solid color-mix(in srgb, var(--color-neutral-100) 10%, transparent);
  transition: box-shadow .15s, border-color .15s, transform .15s;
  height: 100%;
}
.rf-tool-card:hover { box-shadow: var(--shadow-md); border-color: color-mix(in srgb, var(--color-accent) 45%, transparent); transform: translateY(-1px); color: inherit; }
.rf-tool-card.rf-tool-card-soon { cursor: not-allowed; pointer-events: none; opacity: .6; }
.rf-tool-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.rf-tool-card-icon {
  width: 38px; height: 38px; border-radius: var(--radius-md); background: var(--color-accent-900);
  color: var(--color-accent-300); display: flex; align-items: center; justify-content: center; font-size: 17px; flex: none;
}
.rf-tool-card-head .tag { white-space: nowrap; flex: none; }
.rf-expand-btn { margin-top: 16px; }

/* ══════════════════════════════════════════════════════════════════════
   Compte connecté + modale connexion/inscription — portage token-à-token
   depuis css/styles.css (mêmes noms de classes, mêmes variables --color-*/
   --space-*/--radius-*/--shadow-*, donc directement compatibles avec les
   valeurs sombres de Nocturne sans rien changer d'autre). Réutilisé par les
   pages d'outils de la refonte qui gardent l'intégration Firebase réelle
   (js/auth.js, js/auth-modal.js) plutôt qu'une maquette statique.
   ══════════════════════════════════════════════════════════════════ */

.auth-slot { display: flex; align-items: center; gap: var(--space-2); }
.btn-account {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; font-weight: 600;
  color: var(--color-accent-300); background: var(--color-accent-900);
  border: none; border-radius: 999px; padding: 8px 16px; cursor: pointer; white-space: nowrap;
}
.btn-account:hover { background: var(--color-accent-800); }
.account-chip { display: none; position: relative; }
.account-chip .avatar {
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--color-accent-500); color: var(--color-bg);
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700; flex: none; border: none; cursor: pointer;
}
.account-chip .avatar:hover { background: var(--color-accent-400); }
.account-menu {
  position: absolute; top: calc(100% + 8px); right: 0; min-width: 200px;
  background: var(--color-surface); border-radius: var(--radius-md); box-shadow: var(--shadow-md);
  padding: var(--space-2); display: flex; flex-direction: column; gap: 2px; z-index: 60;
}
.account-menu-email {
  font-size: 12px; color: var(--color-neutral-500); padding: 6px 8px 8px; margin-bottom: 4px;
  border-bottom: 1px solid var(--color-divider); word-break: break-all;
}
.account-menu-link, .account-menu button {
  display: block; width: 100%; text-align: left; border: none; background: none; cursor: pointer;
  font-size: 13px; color: var(--color-neutral-300); padding: 8px; border-radius: var(--radius-sm); text-decoration: none;
}
.account-menu-link:hover, .account-menu button:hover {
  background: var(--color-neutral-800); color: var(--color-accent-300);
}

@keyframes rf-modal-in { from { opacity: 0; transform: scale(.94); } to { opacity: 1; transform: scale(1); } }
@keyframes rf-overlay-in { from { opacity: 0; } to { opacity: 1; } }

.auth-overlay {
  position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: var(--space-4);
  background: color-mix(in srgb, var(--color-bg) 65%, transparent);
  backdrop-filter: blur(6px);
  animation: rf-overlay-in .2s ease-out;
}
.auth-overlay[hidden] { display: none; }
.auth-modal {
  width: min(420px, 100%); position: relative; border-radius: var(--radius-lg); padding: var(--space-6);
  background: color-mix(in srgb, var(--color-surface) 90%, transparent);
  backdrop-filter: blur(18px) saturate(1.3);
  border: 1px solid color-mix(in srgb, var(--color-neutral-100) 12%, transparent);
  box-shadow: var(--shadow-lg);
  animation: rf-modal-in .25s cubic-bezier(.22, 1, .36, 1);
}
.auth-modal-close { position: absolute; top: var(--space-3); right: var(--space-3); }
.auth-modal h2 { margin: 0 0 var(--space-1); font-size: 22px; padding-right: var(--space-6); }
.auth-modal-sub { margin: 0 0 var(--space-4); font-size: 14px; opacity: .75; }
.auth-tabs { width: 100%; margin-bottom: var(--space-4); }
.auth-tabs .seg-opt { flex: 1; justify-content: center; white-space: nowrap; }
.auth-divider { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-3); }
.auth-divider .line { flex: 1; height: 1px; background: var(--color-divider); }
.auth-divider span { font-size: 12px; color: color-mix(in srgb, var(--color-text) 55%, transparent); }
.auth-form { display: flex; flex-direction: column; gap: var(--space-3); }
.auth-forgot { font-size: 13px; text-align: right; }
.auth-error {
  font-size: 13px; color: var(--color-accent-300); background: var(--color-accent-900);
  border-radius: var(--radius-sm); padding: 8px 12px; margin: 0;
}
.auth-error[hidden] { display: none; }

/* ══════════════════════════════════════════════════════════════════════
   Page outil (ex. générateur de devis) — formulaire + aperçu synchronisé.
   Classes portées de css/styles.css (déjà var()-only, donc directement
   compatibles) + touche verre dépoli propre à Nocturne sur les cartes.
   ══════════════════════════════════════════════════════════════════ */

.back-link { display: flex; align-items: center; gap: 6px; font-size: 14px; color: var(--color-text); text-decoration: none; }
.back-link:hover { color: var(--color-accent); }
.tool-page-header { max-width: 1180px; margin: 0 auto; padding: var(--space-6) 32px var(--space-4); }
.tool-breadcrumb { font-size: 13px; color: color-mix(in srgb, var(--color-text) 60%, transparent); margin-bottom: var(--space-3); }
.tool-breadcrumb a { color: inherit; text-decoration: none; }
.tool-breadcrumb a:hover { color: var(--color-accent); }
.tool-title-row { display: flex; align-items: center; gap: 14px; margin-bottom: 8px; }
.tool-icon-lg {
  width: 48px; height: 48px; border-radius: var(--radius-md); background: var(--color-accent-900);
  display: flex; align-items: center; justify-content: center; flex: none; color: var(--color-accent-300); font-size: 22px;
}
.tool-title-row h1 { margin: 0; font-size: 30px; }
.tool-desc { max-width: 60ch; margin: 0 0 var(--space-6); font-size: 15px; color: color-mix(in srgb, var(--color-text) 78%, transparent); }

.tool-main {
  max-width: 1180px; margin: 0 auto; padding: 0 32px 96px;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: 28px; align-items: start;
}
.tool-form { display: flex; flex-direction: column; gap: 20px; }
.tool-preview { position: sticky; top: 96px; display: flex; flex-direction: column; gap: 20px; }
.tool-form-card, .tool-preview .card {
  background: color-mix(in srgb, var(--color-surface) 55%, transparent);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border: 1px solid color-mix(in srgb, var(--color-neutral-100) 10%, transparent);
  padding: var(--space-4); gap: 16px; box-shadow: var(--shadow-md);
}
.tool-form-card h2 { margin: 0; font-size: 17px; }
.tool-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
.tool-note { font-size: 12px; color: color-mix(in srgb, var(--color-text) 55%, transparent); margin: 0; }
.result-actions { display: flex; gap: var(--space-2); flex-wrap: wrap; margin-top: var(--space-2); }
.history-save-msg { font-size: 13px; margin: 0; }
.history-save-msg.success { color: var(--color-accent-300); }
.history-save-msg.error { color: var(--color-neutral-300); }

/* Sections pédagogiques "Comment ça marche" / FAQ des pages outils (voir
   mockups/refonte/Outil - Sections pedagogiques.dc.html) — classe partagée pour
   éviter de dupliquer ce CSS sur chaque page outil. Reprend le même pattern
   <details>/<summary> que .tarifs-faq-item (tarifs/index.html, style en ligne,
   non partagé) : contenu toujours présent dans le HTML, ouverture/fermeture
   gérée nativement par le navigateur, aucun JS requis pour la FAQ.
   AUDIT-SEO-2026-08-29.md §7/§23. */
.tool-faq-item { border:1px solid color-mix(in srgb, var(--color-neutral-100) 10%, transparent); border-radius:var(--radius-md); background:color-mix(in srgb, var(--color-neutral-100) 4%, transparent); overflow:hidden; transition:background .25s ease, border-color .25s ease; }
.tool-faq-item[open] { background:color-mix(in srgb, var(--color-accent) 9%, transparent); border-color:color-mix(in srgb, var(--color-accent) 34%, transparent); }
.tool-faq-item summary { list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:16px; padding:16px 18px; font-size:14.5px; line-height:1.45; color:var(--color-text); }
.tool-faq-item summary::-webkit-details-marker { display:none; }
.tool-faq-item summary .ph-plus { transition:transform .25s ease, color .2s ease; color:color-mix(in srgb, var(--color-text) 62%, transparent); flex:none; font-size:15px; }
.tool-faq-item[open] summary .ph-plus { transform:rotate(45deg); color:var(--color-accent); }
.tool-faq-item p { margin:0; padding:0 18px 18px; font-size:13.5px; line-height:1.7; color:color-mix(in srgb, var(--color-text) 75%, transparent); max-width:70ch; }

.tool-howitworks { position:relative; overflow:hidden; padding:var(--space-4); }
.tool-howitworks-glow { position:absolute; top:-160px; right:-120px; width:420px; height:420px; border-radius:50%; background:radial-gradient(circle, color-mix(in srgb, var(--color-accent-800) 46%, transparent) 0%, transparent 70%); pointer-events:none; }
.tool-flow { display:grid; grid-template-columns:1fr auto 1fr auto 1fr; gap:14px; align-items:stretch; margin-bottom:26px; }
.tool-flow-step { padding:20px; border-radius:var(--radius-md); background:color-mix(in srgb, var(--color-neutral-100) 5%, transparent); border:1px solid color-mix(in srgb, var(--color-neutral-100) 12%, transparent); }
.tool-flow-step.is-accent { background:color-mix(in srgb, var(--color-accent) 11%, transparent); border-color:color-mix(in srgb, var(--color-accent) 28%, transparent); }
.tool-flow-step.is-result { background:linear-gradient(165deg, var(--color-accent-700), var(--color-accent-900)); border-color:color-mix(in srgb, var(--color-accent) 42%, transparent); }
.tool-flow-step-label { display:flex; align-items:center; gap:9px; margin-bottom:14px; font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:color-mix(in srgb, var(--color-text) 52%, transparent); }
.tool-flow-step.is-accent .tool-flow-step-label, .tool-flow-step.is-result .tool-flow-step-label { color:var(--color-accent-200); }
.tool-flow-step-num { width:22px; height:22px; border-radius:999px; background:var(--color-accent-900); color:var(--color-accent-200); display:flex; align-items:center; justify-content:center; font-size:11px; font-family:var(--font-heading); flex:none; }
.tool-flow-step.is-accent .tool-flow-step-num { background:color-mix(in srgb, var(--color-accent) 30%, transparent); color:var(--color-accent-100); }
.tool-flow-step.is-result .tool-flow-step-num { background:color-mix(in srgb, var(--color-accent-100) 22%, transparent); color:var(--color-accent-100); }
.tool-flow-step-value { margin:0 0 4px; font-family:var(--font-heading); font-size:28px; letter-spacing:-.02em; }
.tool-flow-step.is-accent .tool-flow-step-value, .tool-flow-step.is-result .tool-flow-step-value { color:var(--color-accent-100); }
.tool-flow-step-sub { margin:0; font-size:13px; color:color-mix(in srgb, var(--color-text) 60%, transparent); }
.tool-flow-step.is-result .tool-flow-step-sub { color:color-mix(in srgb, var(--color-accent-100) 74%, transparent); }
.tool-flow-arrow { display:flex; align-items:center; justify-content:center; color:var(--color-accent-300); }
@media (max-width: 760px) {
  .tool-flow { grid-template-columns:1fr; }
  .tool-flow-arrow { transform:rotate(90deg); padding:2px 0; }
}
.tool-playground { display:grid; grid-template-columns:1fr 1fr; gap:26px; padding:22px; border-radius:var(--radius-md); background:color-mix(in srgb, var(--color-neutral-100) 4%, transparent); border:1px solid color-mix(in srgb, var(--color-neutral-100) 10%, transparent); }
@media (max-width: 760px) { .tool-playground { grid-template-columns:1fr; } }
.tool-playground-row { display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin-bottom:14px; }
.tool-playground-row label { font-size:14px; color:color-mix(in srgb, var(--color-text) 78%, transparent); }
.tool-playground-row output { font-family:var(--font-heading); font-size:17px; color:var(--color-accent-200); }
.tool-playground-scale { display:flex; justify-content:space-between; margin-top:2px; font-size:11.5px; color:color-mix(in srgb, var(--color-text) 62%, transparent); }
.tool-playground input[type="range"] { -webkit-appearance:none; appearance:none; background:transparent; width:100%; height:24px; }
.tool-playground input[type="range"]::-webkit-slider-runnable-track { height:6px; border-radius:999px; background:color-mix(in srgb, var(--color-neutral-100) 14%, transparent); }
.tool-playground input[type="range"]::-moz-range-track { height:6px; border-radius:999px; background:color-mix(in srgb, var(--color-neutral-100) 14%, transparent); }
.tool-playground input[type="range"]::-webkit-slider-thumb { -webkit-appearance:none; width:22px; height:22px; margin-top:-8px; border-radius:999px; background:var(--color-accent); border:3px solid var(--color-bg); cursor:grab; }
.tool-playground input[type="range"]::-moz-range-thumb { width:22px; height:22px; border-radius:999px; background:var(--color-accent); border:3px solid var(--color-bg); cursor:grab; }
.tool-playground-choice { display:flex; align-items:center; gap:13px; padding:12px 14px; min-height:58px; border-radius:var(--radius-md); cursor:pointer; text-align:left; width:100%; border:1px solid color-mix(in srgb, var(--color-neutral-100) 12%, transparent); background:transparent; color:var(--color-text); font:inherit; transition:background .22s ease, border-color .22s ease, transform .22s cubic-bezier(.16,1,.3,1); }
.tool-playground-choice.is-active { border-color:var(--color-accent); background:color-mix(in srgb, var(--color-accent) 13%, transparent); transform:translateX(4px); }
.tool-playground-choice-dot { width:16px; height:16px; flex:none; border-radius:999px; border:2px solid color-mix(in srgb, var(--color-neutral-100) 28%, transparent); }
.tool-playground-choice.is-active .tool-playground-choice-dot { border-color:var(--color-accent); background:var(--color-accent); box-shadow:inset 0 0 0 3px var(--color-bg); }
.tool-playground-choice-body { min-width:0; flex:1; }
.tool-playground-choice-label { display:block; font-size:14px; line-height:1.3; }
.tool-playground-choice-bar-track { display:block; margin-top:6px; height:5px; border-radius:999px; background:color-mix(in srgb, var(--color-neutral-100) 12%, transparent); overflow:hidden; }
.tool-playground-choice-bar { display:block; height:100%; border-radius:999px; background:color-mix(in srgb, var(--color-accent) 34%, transparent); transition:width .45s cubic-bezier(.16,1,.3,1), background .22s ease; }
.tool-playground-choice.is-active .tool-playground-choice-bar { background:var(--color-accent); }
.tool-playground-choice-figures { flex:none; text-align:right; }
.tool-playground-choice-rate { display:block; font-family:var(--font-heading); font-size:15px; }
.tool-playground-choice-amount { display:block; font-size:12px; color:color-mix(in srgb, var(--color-text) 58%, transparent); }
.tool-split-row { margin-bottom:11px; }
.tool-split-row-head { display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin-bottom:6px; }
.tool-split-row-head span:first-child { font-size:13.5px; color:color-mix(in srgb, var(--color-text) 84%, transparent); }
.tool-split-row-head span:last-child { font-family:var(--font-heading); font-size:14px; white-space:nowrap; }
.tool-split-bar-track { display:block; height:7px; border-radius:999px; background:color-mix(in srgb, var(--color-neutral-100) 10%, transparent); overflow:hidden; }
.tool-split-bar { display:block; height:100%; border-radius:999px; background:var(--color-accent); transition:width .5s cubic-bezier(.16,1,.3,1); }
.tool-playground-note { margin:14px 0 0; padding:13px 15px; border-radius:var(--radius-md); background:color-mix(in srgb, var(--color-accent) 9%, transparent); border-left:2px solid var(--color-accent); font-size:13px; line-height:1.6; color:color-mix(in srgb, var(--color-text) 82%, transparent); }

@media (max-width: 900px) {
  .tool-main { grid-template-columns: 1fr; }
  .tool-preview { position: static; }
  .tool-form-row { grid-template-columns: 1fr; }
}

.tool-main.single-col { grid-template-columns: 1fr; max-width: 880px; }

/* .tool-main-grid : regroupe .tool-form + .tool-preview dans leur propre sous-grille
   à 2 colonnes, en un seul item (grid-column:1/-1) de la grille .tool-main. Nécessaire
   depuis l'ajout de la section pédagogique (.tool-howitworks) et de la FAQ sous
   l'aperçu sur les outils à aperçu en direct (générateurs de devis/facture, CGV,
   contrat, etc.) : sans ce regroupement, .tool-form/.tool-preview restaient des items
   NON étendus alors que les deux nouvelles sections, elles, le sont (grid-column:1/-1)
   — avec grid-template-columns:auto-fit sur .tool-main, un item étendu force la
   création d'une 3e colonne (pour l'auto-fit à ~1180px de large) qui reste vide dans
   la rangée du formulaire (espace vide à droite constaté en prod le 31 août 2026),
   ET mélanger des items étendus et non étendus dans la même grille auto-fit rendait
   le calcul de la zone de blocage (containing block) de .tool-preview en position
   sticky peu fiable, avec un chevauchement visible sur la section pédagogique
   pendant le défilement. En isolant le duo formulaire/aperçu dans sa propre grille à
   2 colonnes fixes, .tool-main n'a plus jamais qu'un seul item par rangée quel que
   soit l'outil (étendu à chaque fois) : plus d'ambiguïté de colonnes ni de zone de
   blocage sticky mal calculée. */
.tool-main-grid { display: grid; grid-template-columns: minmax(340px, 1fr) minmax(340px, 1fr); gap: 28px; align-items: start; grid-column: 1 / -1; }
@media (max-width: 900px) {
  .tool-main-grid { grid-template-columns: 1fr; }
}

.doc-preview { padding: var(--space-6); font-size: 13px; }
.doc-preview h2 { font-family: var(--font-heading); font-size: 20px; margin: 0 0 var(--space-3); }
.doc-preview p { margin: 0 0 var(--space-2); line-height: 1.6; }

/* ══════════════════════════════════════════════════════════════════════
   Article de blog (page détail) — adapté de mockups/refonte/ArticleDetail.
   Chrome de page (fil d'Ariane, titre, chapeau, partage, sommaire,
   colonne latérale, CTA de fin, "À lire aussi") ; le contenu de l'article
   lui-même (article.content, HTML depuis Firestore) hérite de la
   typographie ci-dessous et peut utiliser <p>, <h2>, <ul>, <strong>,
   <a>, <blockquote>.
   ══════════════════════════════════════════════════════════════════ */

.article-header { max-width: 780px; margin: 0 auto var(--space-8); padding: 36px 32px 0; }
.article-breadcrumb { font-size: 13px; color: color-mix(in srgb, var(--color-text) 62%, transparent); margin: 0 0 24px; }
.article-breadcrumb a { color: inherit; text-decoration: none; }
.article-breadcrumb a:hover { color: var(--color-accent); }
.article-header h1 { margin: 0 0 18px; font-size: clamp(28px, 4.4vw, 44px); line-height: 1.14; letter-spacing: -.01em; }
.article-lede { margin: 0 0 22px; font-size: 18px; line-height: 1.6; color: color-mix(in srgb, var(--color-text) 85%, transparent); }
.article-meta-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; font-size: 13.5px; color: color-mix(in srgb, var(--color-text) 60%, transparent); }
.article-meta-row .sep { opacity: .5; }
.article-share { display: flex; align-items: center; gap: 8px; }
.article-share .btn-icon { width: 30px; height: 30px; text-decoration: none; }
.article-share-copied { color: var(--color-accent-300); font-size: 13px; }

.article-hero-wrap { max-width: 1180px; margin: 0 auto; padding: 0 32px; }
.article-hero {
  border-radius: var(--radius-lg); overflow: hidden; margin: 28px 0 var(--space-7); aspect-ratio: 21/9;
  background: color-mix(in srgb, var(--color-surface) 70%, transparent);
  background-size: cover; background-position: center;
  display: flex; align-items: center; justify-content: center;
  font-size: 40px; color: color-mix(in srgb, var(--color-text) 30%, transparent);
}

.article-layout { max-width: 1180px; margin: 0 auto; padding: 0 32px 100px; display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 56px; align-items: start; }
@media (max-width: 980px) { .article-layout { grid-template-columns: 1fr; } .article-sidebar { order: -1; position: static !important; } }

.article-detail-body { max-width: 680px; font-size: 17.5px; line-height: 1.8; color: color-mix(in srgb, var(--color-text) 90%, transparent); }
.article-detail-body p { margin: 0 0 var(--space-5); }
.article-detail-body h2 { font-family: var(--font-heading); font-size: 26px; line-height: 1.25; margin: var(--space-8) 0 var(--space-3); scroll-margin-top: 90px; }
.article-detail-body h3 { font-size: 18px; margin: var(--space-6) 0 var(--space-2); }
.article-detail-body ul { margin: 0 0 var(--space-5); padding-left: 22px; display: flex; flex-direction: column; gap: 12px; }
.article-detail-body strong { font-weight: 600; }
.article-detail-body blockquote {
  margin: var(--space-6) 0; padding: 28px 32px; border-radius: var(--radius-lg); font-size: 19px; line-height: 1.6; font-style: italic;
  background: color-mix(in srgb, var(--color-surface) 55%, transparent); color: color-mix(in srgb, var(--color-text) 92%, transparent);
}
.article-detail-body table { width: 100%; border-collapse: collapse; margin: 0 0 var(--space-5); font-size: 14px; }
.article-detail-body table th, .article-detail-body table td { padding: 10px 12px; text-align: left; border-bottom: 1px solid color-mix(in srgb, var(--color-neutral-100) 10%, transparent); }
.article-detail-body table thead { border-bottom: 1.5px solid color-mix(in srgb, var(--color-neutral-100) 20%, transparent); }

.article-cta {
  display: flex; flex-direction: row; align-items: center; gap: var(--space-4);
  padding: var(--space-4) var(--space-5); margin: var(--space-3) 0 var(--space-6);
  text-decoration: none; color: inherit; border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--color-surface) 55%, transparent);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border: 1px solid color-mix(in srgb, var(--color-neutral-100) 10%, transparent);
  transition: box-shadow .15s ease, transform .15s ease;
}
.article-cta:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); color: inherit; }
.article-cta-icon {
  width: 44px; height: 44px; border-radius: var(--radius-md); background: var(--color-accent-900);
  display: flex; align-items: center; justify-content: center; flex: none; color: var(--color-accent-300); font-size: 20px;
}
.article-cta-body { flex: 1 1 auto; display: flex; flex-direction: column; gap: 2px; }
.article-cta-kicker { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; color: var(--color-accent); }
.article-cta .btn { flex: none; pointer-events: none; }
@media (max-width: 560px) { .article-cta { flex-direction: column; align-items: flex-start; } }

.article-steps { display: flex; flex-direction: column; gap: 22px; margin: 0 0 var(--space-5); }
.article-step { display: flex; gap: 18px; }
.article-step-num {
  width: 32px; height: 32px; border-radius: 999px; background: var(--color-accent-900); color: var(--color-accent-300);
  display: flex; align-items: center; justify-content: center; font-family: var(--font-heading); font-size: 14px; flex: none;
}
.article-step-title { margin: 0 0 4px; font-weight: 600; font-size: 16px; }
.article-step-body { margin: 0; color: color-mix(in srgb, var(--color-text) 78%, transparent); }

.article-feedback { display: flex; align-items: center; gap: 14px; padding: var(--space-4) 0; margin-top: var(--space-3); border-top: 1px solid color-mix(in srgb, var(--color-neutral-100) 12%, transparent); }
.article-feedback p { margin: 0; font-size: 14px; color: color-mix(in srgb, var(--color-text) 65%, transparent); }
.article-feedback .btn-icon { width: 34px; height: 34px; }
.article-feedback .btn-icon.is-active { background: color-mix(in srgb, var(--color-accent) 20%, transparent); color: var(--color-accent-300); }
.article-feedback-thanks { font-size: 13px; color: var(--color-accent-300); }

.article-sidebar { display: flex; flex-direction: column; gap: var(--space-5); position: sticky; top: 96px; }
.article-toc {
  background: color-mix(in srgb, var(--color-surface) 50%, transparent);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border: 1px solid color-mix(in srgb, var(--color-neutral-100) 10%, transparent);
  border-radius: var(--radius-md); padding: 20px; display: flex; flex-direction: column; gap: 10px;
}
.article-toc-title { margin: 0 0 4px; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: color-mix(in srgb, var(--color-text) 55%, transparent); }
.article-toc a { font-size: 13.5px; text-decoration: none; color: var(--color-text); }
.article-toc a:hover { color: var(--color-accent); }

.article-sidebar-card {
  background: color-mix(in srgb, var(--color-surface) 65%, transparent);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border: 1px solid color-mix(in srgb, var(--color-neutral-100) 12%, transparent);
  border-radius: var(--radius-md); padding: 22px; display: flex; flex-direction: column; gap: 12px;
}
.article-sidebar-card .article-cta-icon { width: 32px; height: 32px; font-size: 15px; }
.article-sidebar-card .card-title { margin: 0; font-size: 15px; }
.article-sidebar-card .card-body { margin: 0; font-size: 13px; }
.article-sidebar-card .btn { font-size: 13px; text-decoration: none; align-self: flex-start; }
.article-sidebar-card .input { font-size: 13.5px; }
.article-newsletter-confirm { margin: 0; font-size: 13px; color: var(--color-accent-300); display: flex; align-items: center; gap: 6px; }

.article-bottom-cta {
  max-width: 1180px; margin: var(--space-8) auto 0; padding: 44px 40px;
  background: color-mix(in srgb, var(--color-surface) 55%, transparent);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  border: 1px solid color-mix(in srgb, var(--color-neutral-100) 12%, transparent);
  border-radius: var(--radius-lg); display: flex; align-items: center; justify-content: space-between; gap: 28px; flex-wrap: wrap;
}
.article-bottom-cta h2 { margin: 0 0 10px; font-size: 24px; }
.article-bottom-cta p { margin: 0; font-size: 15px; color: color-mix(in srgb, var(--color-text) 78%, transparent); max-width: 460px; }
.article-bottom-cta-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.article-bottom-cta-actions .btn { text-decoration: none; white-space: nowrap; }

.article-related { max-width: 1180px; margin: var(--space-8) auto 0; padding: 0 32px 96px; }
.article-related h2 { margin: 0 0 24px; font-size: 20px; }

.article-comments { margin-top: var(--space-8); padding-top: var(--space-6); border-top: 1px solid color-mix(in srgb, var(--color-neutral-100) 12%, transparent); }
.article-comments h2 { font-family: var(--font-heading); font-size: 20px; margin: 0 0 var(--space-5); }
.article-comment-list { display: flex; flex-direction: column; gap: 18px; margin-bottom: var(--space-6); }
.article-comment { display: flex; gap: 12px; }
.article-comment-body { flex: 1; min-width: 0; }
.article-comment-body p:first-child { margin: 0 0 2px; font-size: 14px; font-weight: 600; }
.article-comment-meta { margin: 0 0 6px; font-size: 12px; color: color-mix(in srgb, var(--color-text) 55%, transparent); }
.article-comment-text { margin: 0; font-size: 14px; line-height: 1.6; color: color-mix(in srgb, var(--color-text) 88%, transparent); }
.article-comment-empty { font-size: 14px; color: color-mix(in srgb, var(--color-text) 60%, transparent); margin: 0 0 var(--space-6); }
.article-comment-form { display: flex; flex-direction: column; gap: 12px; max-width: 520px; }
.article-comment-form h3 { margin: 0; font-size: 15px; }
.article-comment-pending-note { margin: 0; font-size: 12.5px; color: color-mix(in srgb, var(--color-text) 60%, transparent); }

@media (max-width: 600px) {
  .article-header h1 { font-size: 28px; }
  .article-hero { aspect-ratio: 4/3; }
}

.compare-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.compare-table th, .compare-table td { padding: 8px 10px; text-align: right; border-bottom: 1px solid color-mix(in srgb, var(--color-neutral-100) 10%, transparent); }
.compare-table th:first-child, .compare-table td:first-child { text-align: left; }
.compare-table thead th { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: color-mix(in srgb, var(--color-text) 60%, transparent); border-bottom: 1.5px solid var(--color-text); }
.compare-table .winner { color: var(--color-accent-300); font-weight: 700; }

.result-card { padding: var(--space-6); gap: var(--space-4); }
.result-flag { display: flex; align-items: center; gap: 8px; color: var(--color-accent-300); font-size: 13px; font-weight: 600; }
.result-flag i { font-size: 16px; }
.result-label { font-size: 13px; color: color-mix(in srgb, var(--color-text) 60%, transparent); margin-bottom: 2px; }
.result-value { font-family: var(--font-heading); font-size: 48px; color: var(--color-accent); line-height: 1; }
.result-value.small { font-size: 32px; }
.result-stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--space-3); }
.result-stat {
  padding: var(--space-3); gap: 4px;
  background: color-mix(in srgb, var(--color-surface) 70%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-neutral-100) 8%, transparent);
}
.result-stat .k { font-size: 12px; color: color-mix(in srgb, var(--color-text) 60%, transparent); }
.result-stat .v { font-family: var(--font-heading); font-size: 22px; }

.breakdown-row { display: flex; align-items: center; gap: var(--space-2); }
.breakdown-row .label { font-size: 13px; flex: 1; }
.breakdown-row .amount { font-size: 13px; font-weight: 600; width: 90px; text-align: right; }
.breakdown-bar { width: 100px; height: 6px; border-radius: 999px; background: color-mix(in srgb, var(--color-neutral-100) 14%, transparent); overflow: hidden; flex: none; }
.breakdown-bar span { display: block; height: 100%; background: var(--color-accent); }
.progress-bar { height: 14px; border-radius: 999px; background: color-mix(in srgb, var(--color-neutral-100) 14%, transparent); overflow: hidden; }
.progress-bar span { display: block; height: 100%; background: var(--color-accent); }

.auth-gate { padding: var(--space-8) var(--space-6); text-align: center; align-items: center; gap: var(--space-2); max-width: 480px; margin: var(--space-8) auto; }
.auth-gate h2 { font-family: var(--font-heading); font-size: 22px; margin: 0; }
.auth-gate p { margin: 0 0 var(--space-2); color: color-mix(in srgb, var(--color-text) 65%, transparent); }

.history-toolbar { display: flex; gap: var(--space-3); flex-wrap: wrap; align-items: center; justify-content: space-between; margin-bottom: var(--space-4); }
.history-toolbar .search-box { flex: 1; min-width: 220px; }
.history-table-wrap { overflow-x: auto; }
.history-table-wrap .table th:last-child, .history-table-wrap .table td:last-child { text-align: right; }

.no-results { max-width: 1180px; margin: 0 auto; padding: 0 32px var(--space-8); text-align: center; color: color-mix(in srgb, var(--color-text) 60%, transparent); }
.empty-state { text-align: center; padding: var(--space-8); color: color-mix(in srgb, var(--color-text) 60%, transparent); }

.dash-stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--space-4); margin-bottom: var(--space-6); }
.dash-stat {
  padding: var(--space-4); border-radius: var(--radius-md); display: flex; flex-direction: column; gap: 6px;
  background: color-mix(in srgb, var(--color-surface) 55%, transparent);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border: 1px solid color-mix(in srgb, var(--color-neutral-100) 10%, transparent);
  box-shadow: var(--shadow-sm);
}
.dash-stat .k { font-size: 12px; opacity: .6; }
.dash-stat .v { font-family: var(--font-heading); font-size: 26px; }
.dash-link-row { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; padding: 6px 0; border-bottom: 1px solid color-mix(in srgb, var(--color-neutral-100) 10%, transparent); }
.dash-link-row:last-child { border-bottom: none; }

.table { width: 100%; border-collapse: collapse; font-size: 14px; }
.table th {
  text-align: left; padding: 8px 4px; font-size: 11px; text-transform: uppercase; letter-spacing: .06em;
  color: color-mix(in srgb, var(--color-text) 60%, transparent);
}
.table td { padding: 8px 4px; border-bottom: 1px solid color-mix(in srgb, var(--color-neutral-100) 10%, transparent); }

.rf-preview-fab {
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); z-index: 38;
  white-space: nowrap; box-shadow: var(--shadow-lg); background: var(--color-surface);
  display: none;
}
@media (max-width: 760px) { .rf-preview-fab.is-narrow { display: inline-flex; } }

.rf-toast {
  position: fixed; bottom: 24px; right: 24px; z-index: 40;
  display: flex; align-items: center; gap: 10px; padding: 14px 18px; border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--color-surface) 92%, transparent);
  backdrop-filter: blur(16px);
  border: 1px solid color-mix(in srgb, var(--color-neutral-100) 14%, transparent);
  box-shadow: var(--shadow-lg); font-size: 14px;
  opacity: 0; transform: translateY(8px); pointer-events: none;
  transition: opacity .25s ease, transform .25s ease;
}
.rf-toast.is-visible { opacity: 1; transform: translateY(0); }
.rf-toast i { color: var(--color-accent); font-size: 18px; }

/* ══════════════════════════════════════════════════════════════════════
   Espace connecté (Dashboard, Historique, CRM, Rappels, Paramètres) —
   sidebar partagée, devient un tiroir coulissant sous 900px.
   ══════════════════════════════════════════════════════════════════ */

.rf-dash { min-height: 100vh; display: flex; position: relative; z-index: 1; }
.rf-dash-backdrop {
  display: none; position: fixed; inset: 0; z-index: 15;
  background: color-mix(in srgb, black 45%, transparent);
}
.rf-dash-backdrop.is-open { display: block; }

.rf-dash-sidebar {
  position: sticky; top: 0; z-index: 1; width: 260px; flex: none; height: 100vh; padding: 20px;
  display: flex; flex-direction: column; gap: 20px; overflow-y: auto;
  background: color-mix(in srgb, var(--color-surface) 45%, transparent);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  border-right: 1px solid color-mix(in srgb, var(--color-neutral-100) 10%, transparent);
  scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--color-text) 22%, transparent) transparent;
}
.rf-dash-sidebar::-webkit-scrollbar { width: 6px; }
.rf-dash-sidebar::-webkit-scrollbar-track { background: transparent; }
.rf-dash-sidebar::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--color-text) 22%, transparent); border-radius: 999px;
}
.rf-dash-sidebar::-webkit-scrollbar-thumb:hover { background: color-mix(in srgb, var(--color-accent) 50%, transparent); }
.rf-dash-brand { display: flex; align-items: center; gap: 8px; text-decoration: none; color: inherit; }
.rf-dash-brand-mark {
  width: 28px; height: 28px; border-radius: var(--radius-md); background: var(--color-accent-900);
  color: var(--color-accent-300); display: flex; align-items: center; justify-content: center; font-size: 14px; flex: none;
}
.rf-dash-brand span:last-child { font-family: var(--font-heading); font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }

.rf-dash-user { display: flex; align-items: center; gap: 10px; padding: 12px; border-radius: var(--radius-md); background: color-mix(in srgb, var(--color-neutral-100) 6%, transparent); }
.rf-dash-user-avatar {
  width: 36px; height: 36px; border-radius: 999px; background: var(--color-accent-800); color: var(--color-accent-100);
  display: flex; align-items: center; justify-content: center; font-family: var(--font-heading); flex: none;
}
.rf-dash-user-text { min-width: 0; }
.rf-dash-user-email { margin: 0; font-size: 13px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rf-dash-user-plan { margin: 0; font-size: 12px; color: color-mix(in srgb, var(--color-text) 55%, transparent); }

.rf-dash-nav { display: flex; flex-direction: column; gap: 2px; }
.rf-dash-nav-link {
  display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: var(--radius-md);
  text-decoration: none; color: var(--color-text); font-size: 14px;
}
.rf-dash-nav-link:hover { background: color-mix(in srgb, var(--color-text) 6%, transparent); color: var(--color-text); }
.rf-dash-nav-link.is-active { color: var(--color-accent); background: color-mix(in srgb, var(--color-accent) 12%, transparent); }
.rf-dash-nav-link.is-active:hover { color: var(--color-accent); }

.rf-dash-subnav {
  display: flex; flex-direction: column; gap: 1px; margin: 2px 0 6px 21px; padding-left: 12px;
  border-left: 1px solid color-mix(in srgb, var(--color-neutral-100) 14%, transparent);
}
.rf-dash-subnav[hidden] { display: none; }
.rf-dash-subnav-link {
  display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: var(--radius-sm);
  text-decoration: none; color: color-mix(in srgb, var(--color-text) 68%, transparent); font-size: 12.5px;
}
.rf-dash-subnav-link i { font-size: 13px; }
.rf-dash-subnav-link:hover { color: var(--color-text); background: color-mix(in srgb, var(--color-text) 6%, transparent); }
.rf-dash-subnav-link.is-active { color: var(--color-accent); }

.rf-dash-logout { margin-top: auto; text-decoration: none; }

@media (max-width: 900px) {
  .rf-dash-sidebar {
    position: fixed; top: 0; left: 0; bottom: 0; z-index: 20; width: 260px;
    background: var(--color-surface); backdrop-filter: none;
    transform: translateX(-100%); transition: transform .25s ease;
  }
  .rf-dash-sidebar.is-open { transform: translateX(0); }
}

.rf-dash-main { position: relative; z-index: 1; flex: 1; min-width: 0; padding: 32px 40px 64px; }
@media (max-width: 640px) { .rf-dash-main { padding: 24px 20px 48px; } }
.rf-dash-topbar-row { display: flex; align-items: center; gap: 12px; margin-bottom: 4px; }
.rf-dash-hamburger { display: none; }
@media (max-width: 900px) { .rf-dash-hamburger { display: inline-flex; } }
.rf-dash-kicker { margin: 0; font-size: 13px; color: color-mix(in srgb, var(--color-text) 60%, transparent); text-transform: uppercase; letter-spacing: .06em; }
.rf-dash-h1 { margin: 0 0 6px; font-size: 30px; }
.rf-dash-sub { margin: 0 0 32px; font-size: 15px; color: color-mix(in srgb, var(--color-text) 78%, transparent); }

@keyframes rf-skeleton-pulse { 0%, 100% { opacity: 0.5; } 50% { opacity: 0.9; } }
.rf-skeleton { border-radius: var(--radius-md); background: color-mix(in srgb, var(--color-neutral-100) 8%, transparent); animation: rf-skeleton-pulse 1.4s ease-in-out infinite; }

.rf-glass-card {
  background: color-mix(in srgb, var(--color-surface) 55%, transparent);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border: 1px solid color-mix(in srgb, var(--color-neutral-100) 10%, transparent);
}
a.rf-glass-card { text-decoration: none; color: inherit; transition: border-color .15s; }
a.rf-glass-card:hover { border-color: color-mix(in srgb, var(--color-accent) 45%, transparent); color: inherit; }

.rf-stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; margin-bottom: 36px; }
.rf-stat-card .card-kicker { display: flex; align-items: center; gap: 6px; }
.rf-stat-value { margin: 0; font-size: 34px; font-family: var(--font-heading); }

.rf-quick-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; margin-bottom: 36px; }
.rf-quick-card { padding: var(--space-3); }
.rf-quick-card-icon {
  width: 36px; height: 36px; border-radius: var(--radius-md); background: var(--color-accent-900);
  color: var(--color-accent-300); display: flex; align-items: center; justify-content: center; font-size: 16px;
}

.rf-empty-card { align-items: center; text-align: center; padding: 40px 24px; gap: 10px; }
.rf-empty-card > i { font-size: 26px; color: var(--color-accent); }
.rf-empty-card p:first-of-type { margin: 0; font-size: 15px; font-weight: 500; }
.rf-empty-card p:last-of-type { margin: 0; font-size: 13px; color: color-mix(in srgb, var(--color-text) 65%, transparent); max-width: 38ch; }

.rf-breadcrumb-nav { margin: 0; font-size: 13px; color: color-mix(in srgb, var(--color-text) 60%, transparent); text-transform: uppercase; letter-spacing: .06em; white-space: nowrap; }
.rf-breadcrumb-nav a { color: inherit; text-decoration: none; }

.rf-filters { display: flex; gap: 8px; margin-bottom: 20px; flex-wrap: wrap; }
.rf-filter-pill {
  padding: 7px 16px; border-radius: 999px; font-size: 13px; cursor: pointer; white-space: nowrap;
  background: color-mix(in srgb, var(--color-surface) 55%, transparent);
  color: var(--color-text);
  border: 1px solid color-mix(in srgb, var(--color-neutral-100) 12%, transparent);
  font-family: var(--font-body);
}
.rf-filter-pill.is-active { background: color-mix(in srgb, var(--color-accent) 16%, transparent); color: var(--color-accent); border-color: var(--color-accent); }

.rf-table-card { padding: 8px; overflow-x: auto; }
.rf-table-card table { min-width: 640px; }
.rf-table-doc-ref { display: flex; align-items: center; gap: 8px; }
.rf-table-doc-ref i { color: var(--color-accent); }
.rf-table-status i { margin-right: 4px; }

/* ══════════════════════════════════════════════════════════════════════
   CRM — vue liste/pipeline, panneau latéral, dialogue de confirmation.
   ══════════════════════════════════════════════════════════════════ */

.rf-crm-toolbar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-bottom: 24px; }
.rf-crm-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.rf-crm-controls { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; }
.rf-crm-search { position: relative; flex: 1; max-width: 280px; min-width: 180px; }
.rf-crm-search i { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); opacity: .5; font-size: 15px; pointer-events: none; }
.rf-crm-search input { padding-left: 34px; }

.rf-client-row {
  cursor: pointer; text-align: left; flex-direction: row; align-items: center; justify-content: space-between; gap: 12px;
  width: 100%; font: inherit; color: inherit;
}
.rf-client-row-left { display: flex; align-items: center; gap: 12px; min-width: 0; }
.rf-client-avatar {
  width: 36px; height: 36px; border-radius: 999px; background: var(--color-accent-800); color: var(--color-accent-100);
  display: flex; align-items: center; justify-content: center; font-family: var(--font-heading); font-size: 13px; flex: none;
}
.rf-client-row-name { margin: 0; font-size: 14.5px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rf-client-row-email { margin: 0; font-size: 12.5px; color: color-mix(in srgb, var(--color-text) 60%, transparent); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rf-client-row-right { display: flex; align-items: center; gap: 8px; flex: none; }
.rf-client-row-right .tag { white-space: nowrap; }
.rf-client-row-right > i { color: color-mix(in srgb, var(--color-text) 62%, transparent); }

.rf-kanban { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; align-items: start; }
.rf-kanban-col { display: flex; flex-direction: column; gap: 10px; }
.rf-kanban-col-title { margin: 0; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: color-mix(in srgb, var(--color-text) 60%, transparent); }
.rf-kanban-card { gap: 8px; }
.rf-kanban-card-name { all: unset; cursor: pointer; display: block; font-size: 14px; font-weight: 500; }
.rf-kanban-card-tags { display: flex; gap: 6px; flex-wrap: wrap; }
.rf-kanban-card-tags .tag { white-space: nowrap; }
.rf-kanban-advance { align-self: flex-start; padding-inline: 0; font-size: 12.5px; white-space: nowrap; flex: none; }

.rf-panel-backdrop { position: fixed; inset: 0; z-index: 35; background: color-mix(in srgb, black 50%, transparent); }
.rf-side-panel {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 36; width: min(420px, 100%); padding: 24px;
  overflow-y: auto;
  background: color-mix(in srgb, var(--color-surface) 88%, transparent);
  backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
  border-left: 1px solid color-mix(in srgb, var(--color-neutral-100) 12%, transparent);
  box-shadow: var(--shadow-lg);
  display: flex; flex-direction: column; gap: 20px;
}
.rf-panel-head { display: flex; align-items: center; justify-content: space-between; }
.rf-panel-head-left { display: flex; align-items: center; gap: 12px; min-width: 0; }
.rf-panel-avatar {
  width: 44px; height: 44px; border-radius: 999px; background: var(--color-accent-800); color: var(--color-accent-100);
  display: flex; align-items: center; justify-content: center; font-family: var(--font-heading); font-size: 15px; flex: none;
}
.rf-panel-head h2 { margin: 0; font-size: 19px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rf-panel-head-actions { display: flex; gap: 4px; flex: none; }
.rf-panel-tags { display: flex; gap: 6px; flex-wrap: wrap; }
.rf-panel-tags .tag { white-space: nowrap; }
.rf-panel-meta { margin: 0; font-size: 13.5px; color: color-mix(in srgb, var(--color-text) 75%, transparent); }
.rf-panel-meta i { margin-right: 6px; }
.rf-panel-section-title { margin: 0 0 8px; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: color-mix(in srgb, var(--color-text) 55%, transparent); }
.rf-panel-list { display: flex; flex-direction: column; gap: 6px; }
.rf-panel-list-row {
  display: flex; align-items: center; justify-content: space-between; font-size: 13px; padding: 8px 10px;
  border-radius: var(--radius-sm); background: color-mix(in srgb, var(--color-neutral-100) 6%, transparent);
}
.rf-panel-list-row i { color: var(--color-accent); margin-right: 6px; }
.rf-panel-empty { margin: 0; font-size: 13px; color: color-mix(in srgb, var(--color-text) 55%, transparent); }
.rf-panel-add-reminder { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; font-size: 13px; text-decoration: none; }
.rf-form-error { margin: 4px 0 0; font-size: 12px; color: var(--color-accent-300); }
.rf-form-actions { display: flex; gap: 10px; }
.rf-form-actions .btn { flex: 1; }

.rf-no-clients { text-align: center; padding: 32px 0; color: color-mix(in srgb, var(--color-text) 65%, transparent); }

/* Filet de sécurité : toute règle qui fixe `display` sur un élément (.card,
   .btn, .rf-kanban, .dialog-backdrop, .account-menu…) neutralise sinon le
   comportement natif de l'attribut `hidden` dès que les spécificités
   s'égalent. Plutôt que de rajouter un `[hidden]` dédié à chaque classe
   concernée (fragile, oublié à chaque nouvelle page), une seule règle
   globale et prioritaire couvre tous les cas, présents et futurs. */
[hidden] { display: none !important; }

.rf-reminder-row { flex-direction: row; align-items: center; justify-content: space-between; }
.rf-reminder-left { display: flex; align-items: center; gap: 12px; min-width: 0; }
.rf-reminder-icon {
  width: 34px; height: 34px; border-radius: var(--radius-md); background: var(--color-accent-900);
  color: var(--color-accent-300); display: flex; align-items: center; justify-content: center; font-size: 15px; flex: none;
}
.rf-reminder-title { margin: 0; font-size: 14.5px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rf-reminder-date { margin: 0; font-size: 12.5px; color: color-mix(in srgb, var(--color-text) 60%, transparent); }

/* ══════════════════════════════════════════════════════════════════════
   Paramètres — barre de complétion, cartes de section, toggles, avatar,
   nuancier de couleur, listes appareils/notifications.
   ══════════════════════════════════════════════════════════════════ */

.rf-settings-wrap { max-width: 640px; }
.rf-completion { margin-bottom: 24px; }
.rf-completion-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.rf-completion-label { margin: 0; font-size: 13px; color: color-mix(in srgb, var(--color-text) 70%, transparent); white-space: nowrap; }
.rf-completion-pct { margin: 0; font-size: 13px; color: var(--color-accent); font-family: var(--font-heading); }
.rf-completion-track { height: 6px; border-radius: 999px; background: color-mix(in srgb, var(--color-neutral-100) 12%, transparent); overflow: hidden; }
.rf-completion-fill { height: 100%; border-radius: 999px; background: var(--color-accent); transition: width .3s ease; }

.rf-settings-sections { display: flex; flex-direction: column; gap: 20px; }
.rf-settings-card { gap: 16px; }
.rf-settings-card h3 { margin: 0; display: flex; align-items: center; gap: 8px; }
.rf-settings-card h3 i { color: var(--color-accent); }
.rf-settings-card-sub { margin: 0; font-size: 13px; color: color-mix(in srgb, var(--color-text) 65%, transparent); }

.rf-avatar-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.rf-avatar-lg {
  width: 52px; height: 52px; border-radius: 999px; background: var(--color-accent-800); color: var(--color-accent-100);
  display: flex; align-items: center; justify-content: center; font-family: var(--font-heading); font-size: 18px; flex: none;
  border: 0; padding: 0; cursor: pointer; overflow: hidden;
}
.rf-avatar-lg:hover { filter: brightness(1.1); }
.rf-avatar-lg img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }

.rf-logo-slot {
  width: 64px; height: 64px; border-radius: var(--radius-md); background: color-mix(in srgb, var(--color-neutral-100) 8%, transparent);
  border: 1px dashed color-mix(in srgb, var(--color-neutral-100) 20%, transparent);
  display: flex; align-items: center; justify-content: center; font-size: 11px; color: color-mix(in srgb, var(--color-text) 62%, transparent);
  text-align: center; cursor: pointer; padding: 0; overflow: hidden;
}
.rf-logo-slot:hover { border-color: color-mix(in srgb, var(--color-accent) 45%, transparent); color: var(--color-accent); }
.rf-logo-slot img { width: 100%; height: 100%; object-fit: contain; border-radius: inherit; }

.rf-swatch-row { display: flex; gap: 10px; }
.rf-swatch { width: 28px; height: 28px; border-radius: 999px; cursor: pointer; border: 2px solid transparent; padding: 0; }
.rf-swatch.is-active { border-color: var(--color-text); }

.rf-list-row { display: flex; align-items: center; justify-content: space-between; padding: 10px 0; border-top: 1px solid color-mix(in srgb, var(--color-neutral-100) 8%, transparent); gap: 10px; flex-wrap: wrap; }
.rf-list-row:first-of-type { border-top: none; }
.rf-list-row-title { margin: 0; font-size: 14px; }
.rf-list-row-sub { margin: 0; font-size: 12.5px; color: color-mix(in srgb, var(--color-text) 60%, transparent); }

.rf-toggle { position: relative; width: 40px; height: 22px; border-radius: 999px; border: none; cursor: pointer; flex: none; background: color-mix(in srgb, var(--color-neutral-100) 18%, transparent); transition: background .2s ease; padding: 0; }
.rf-toggle.is-on { background: var(--color-accent); }
.rf-toggle-thumb { position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 999px; background: var(--color-bg); transition: left .2s ease; display: block; }
.rf-toggle.is-on .rf-toggle-thumb { left: 20px; }

.rf-account-zone-row { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; }

/* ══════════════════════════════════════════════════════════════════════
   Login / Signup — fond flouté imitant la page précédente, carte centrée.
   ══════════════════════════════════════════════════════════════════ */

.rf-login-page { min-height: 100vh; display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; padding: 32px; cursor: pointer; }
.rf-login-ghost { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; filter: blur(16px); opacity: .5; }
.rf-login-ghost-inner { max-width: 1280px; margin: 0 auto; padding: 28px 32px; }
.rf-login-ghost-nav { display: flex; align-items: center; gap: 16px; margin-bottom: 64px; }
.rf-login-ghost-blocks { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.rf-login-ghost-blocks > div { height: 110px; border-radius: 12px; background: var(--color-surface); }

.rf-login-card-wrap { position: relative; z-index: 2; width: 100%; max-width: 400px; cursor: auto; }
.rf-login-brand { display: flex; align-items: center; justify-content: center; gap: 8px; text-decoration: none; color: inherit; margin-bottom: 28px; }
.rf-login-card {
  background: color-mix(in srgb, var(--color-surface) 48%, transparent);
  backdrop-filter: blur(26px); -webkit-backdrop-filter: blur(26px);
  border: 1px solid color-mix(in srgb, var(--color-neutral-100) 14%, transparent);
  box-shadow: var(--shadow-lg); padding: 28px; gap: 20px;
}
.rf-login-divider { display: flex; align-items: center; gap: 10px; }
.rf-login-divider span:not(.rf-login-divider-text) { flex: 1; height: 1px; background: var(--color-divider); }
.rf-login-divider-text { font-size: 12px; color: color-mix(in srgb, var(--color-text) 55%, transparent); }
.rf-login-footnote { margin: 0; font-size: 12px; text-align: center; color: color-mix(in srgb, var(--color-text) 55%, transparent); }
.rf-login-skip { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 20px; font-size: 13px; text-decoration: none; color: color-mix(in srgb, var(--color-text) 65%, transparent); }
.rf-forgot-link { display: block; margin: 6px 0 0; margin-left: auto; background: none; border: none; padding: 0; font: inherit; font-size: 12.5px; color: var(--color-accent-2); cursor: pointer; }

/* ══════════════════════════════════════════════════════════════════════
   Blog — filtres, article à la une, grille, images (ou icône placeholder).
   ══════════════════════════════════════════════════════════════════ */

.rf-blog-intro { padding: 56px 0 28px; max-width: 680px; }
.rf-blog-intro h1 { margin: 0 0 14px; font-size: clamp(30px, 4vw, 42px); line-height: 1.1; }
.rf-blog-intro p { margin: 0; font-size: 16px; color: color-mix(in srgb, var(--color-text) 78%, transparent); }

.rf-blog-featured {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 28px; align-items: center;
  text-decoration: none; color: inherit;
  background: color-mix(in srgb, var(--color-surface) 50%, transparent);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border: 1px solid color-mix(in srgb, var(--color-neutral-100) 10%, transparent);
  border-radius: var(--radius-lg); padding: 16px; margin-bottom: 40px;
}
.rf-blog-featured-img { margin: 0; aspect-ratio: 16/10; border-radius: var(--radius-md); overflow: hidden; background-size: cover; background-position: center; }
.rf-blog-featured-body { padding: 8px 16px 8px 0; }
.rf-blog-featured-body h2 { margin: 0 0 12px; font-size: 26px; line-height: 1.2; }
.rf-blog-featured-body p { margin: 0 0 16px; font-size: 15px; color: color-mix(in srgb, var(--color-text) 78%, transparent); }
.rf-blog-featured-meta { margin: 0; font-size: 13px; color: color-mix(in srgb, var(--color-text) 55%, transparent); }

.rf-blog-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 20px; }
.rf-blog-card {
  text-decoration: none; color: inherit; display: flex; flex-direction: column; gap: 10px;
  background: color-mix(in srgb, var(--color-surface) 50%, transparent);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border: 1px solid color-mix(in srgb, var(--color-neutral-100) 10%, transparent);
  border-radius: var(--radius-md); padding: 12px;
}
.rf-blog-card-img { margin: 0; aspect-ratio: 16/10; border-radius: var(--radius-sm); overflow: hidden; background-size: cover; background-position: center; display: flex; align-items: center; justify-content: center; background-color: color-mix(in srgb, var(--color-neutral-100) 8%, transparent); }
.rf-blog-card-img i { font-size: 22px; color: color-mix(in srgb, var(--color-text) 35%, transparent); }
.rf-blog-card .tag { align-self: flex-start; white-space: nowrap; }
.rf-blog-card h3 { margin: 0; font-size: 16px; line-height: 1.3; }
.rf-blog-card p { margin: 0; font-size: 13px; color: color-mix(in srgb, var(--color-text) 72%, transparent); flex: 1; }
.rf-blog-card-meta { margin: 0; font-size: 12px; color: color-mix(in srgb, var(--color-text) 55%, transparent); }
.rf-blog-empty { text-align: center; padding: 48px 0; color: color-mix(in srgb, var(--color-text) 65%, transparent); }

/* ══════════════════════════════════════════════════════════════════════
   Espace admin — chrome partagé (en-tête, sidebar, listes, stats) pour les
   10 pages admin/*. Voir mockups/refonte/Admin*.dc.html. Composants déjà
   existants (.card, .btn, .tag, .table, .dialog, .input, .seg) réutilisés
   tels quels ; seul l'agencement propre à l'admin est défini ici.
   ══════════════════════════════════════════════════════════════════ */

.admin-header {
  height: 60px; display: flex; align-items: center; justify-content: space-between; padding: 0 24px;
  background: color-mix(in srgb, var(--color-surface) 70%, transparent);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  border-bottom: 1px solid color-mix(in srgb, var(--color-neutral-100) 10%, transparent);
  position: sticky; top: 0; z-index: 30;
}
.admin-header-brand { display: flex; align-items: center; gap: 12px; }
.admin-header-mark {
  width: 30px; height: 30px; border-radius: var(--radius-md); background: color-mix(in srgb, var(--color-accent) 20%, transparent);
  color: var(--color-accent-300); display: flex; align-items: center; justify-content: center; flex: none;
}
.admin-header-title { font-family: var(--font-heading); font-size: 15px; white-space: nowrap; }
.admin-header-actions { display: flex; align-items: center; gap: 16px; }
.admin-header-actions a.admin-view-site { font-size: 13px; text-decoration: none; display: flex; align-items: center; gap: 6px; white-space: nowrap; color: var(--color-text); }
.admin-header-actions a.admin-view-site:hover { color: var(--color-accent-300); }
.admin-header-email { font-size: 13px; color: color-mix(in srgb, var(--color-text) 70%, transparent); white-space: nowrap; }

.admin-shell { display: flex; }
.admin-sidebar {
  width: 230px; flex: none; min-height: calc(100vh - 60px); padding: 20px 14px;
  display: flex; flex-direction: column; gap: 22px;
  background: color-mix(in srgb, var(--color-surface) 40%, transparent);
  border-right: 1px solid color-mix(in srgb, var(--color-neutral-100) 10%, transparent);
}
.admin-nav-group { display: flex; flex-direction: column; gap: 2px; }
.admin-nav-section-title { margin: 0 0 6px 10px; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: color-mix(in srgb, var(--color-text) 62%, transparent); }
.admin-nav-link {
  display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: var(--radius-md);
  text-decoration: none; font-size: 14px; color: var(--color-text);
}
.admin-nav-link:hover { background: color-mix(in srgb, var(--color-neutral-100) 6%, transparent); }
.admin-nav-link.is-active { color: var(--color-accent-300); background: color-mix(in srgb, var(--color-accent) 16%, transparent); }
.admin-nav-link.is-active:hover { background: color-mix(in srgb, var(--color-accent) 16%, transparent); }
/* Compteur d'éléments à traiter (commentaires en attente, messages de contact non
   traités) — voir js/admin-auth.js, chargeNavBadges(). */
.admin-nav-badge {
  margin-left: auto; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px;
  background: var(--color-accent); color: #fff; font-size: 11px; font-weight: 600;
  display: flex; align-items: center; justify-content: center; line-height: 1;
}

.admin-main { flex: 1; min-width: 0; padding: 32px 36px 60px; }
.admin-main.admin-main-narrow { max-width: 820px; }
.admin-main.admin-main-editor { max-width: 1100px; }

.admin-page-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 24px; flex-wrap: wrap; }
.admin-page-head h1 { margin: 0; font-size: 22px; font-weight: 500; white-space: nowrap; }
.admin-page-actions { display: flex; gap: 10px; flex-wrap: wrap; }

.admin-btn-outline {
  border: 1px solid var(--color-accent); color: var(--color-accent-300); background: transparent;
  transition: background .15s ease, color .15s ease;
}
.admin-btn-outline:hover { background: var(--color-accent); color: var(--color-bg); }

.admin-stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; margin-bottom: 32px; }
.admin-stat-card {
  background: color-mix(in srgb, var(--color-surface) 55%, transparent);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border: 1px solid color-mix(in srgb, var(--color-neutral-100) 10%, transparent);
}
.admin-stat-kicker { display: flex; align-items: center; gap: 6px; color: var(--color-accent-300); font-size: 13px; margin-bottom: 6px; }
.admin-stat-value { margin: 0; font-size: 30px; font-family: var(--font-heading); }

.admin-panel {
  background: color-mix(in srgb, var(--color-surface) 55%, transparent);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border: 1px solid color-mix(in srgb, var(--color-neutral-100) 10%, transparent);
}
.admin-panel-title { margin: 0; font-size: 13px; font-weight: 600; color: color-mix(in srgb, var(--color-text) 75%, transparent); }

.admin-toolbar { display: flex; gap: 12px; margin-bottom: 20px; flex-wrap: wrap; align-items: center; }
.admin-search { position: relative; flex: 1; min-width: 200px; max-width: 340px; }
.admin-search i { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); font-size: 14px; color: color-mix(in srgb, var(--color-text) 55%, transparent); }
.admin-search input { padding-left: 32px; }

.admin-list { display: flex; flex-direction: column; gap: 10px; }
.admin-row {
  display: flex; flex-direction: row; align-items: center; gap: 16px; padding: 12px 16px;
  background: color-mix(in srgb, var(--color-surface) 55%, transparent);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border: 1px solid color-mix(in srgb, var(--color-neutral-100) 10%, transparent);
  border-radius: var(--radius-md);
}
.admin-row-thumb { width: 72px; height: 52px; border-radius: var(--radius-sm); overflow: hidden; flex: none; background: color-mix(in srgb, var(--color-neutral-100) 8%, transparent); display: flex; align-items: center; justify-content: center; }
.admin-row-thumb img { width: 100%; height: 100%; object-fit: cover; }
.admin-row-thumb i { font-size: 18px; color: color-mix(in srgb, var(--color-text) 35%, transparent); }
.admin-row-title { flex: 1; min-width: 0; }
.admin-row-title p:first-child { margin: 0 0 4px; font-size: 14.5px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.admin-row-title p:last-child { margin: 0; font-size: 12.5px; color: color-mix(in srgb, var(--color-text) 60%, transparent); }
.admin-row-actions { display: flex; gap: 4px; flex: none; margin-left: auto; }
.admin-empty { text-align: center; padding: 40px 0; color: color-mix(in srgb, var(--color-text) 65%, transparent); }

.admin-avatar { width: 30px; height: 30px; border-radius: 999px; background: var(--color-neutral-800); color: var(--color-text); display: flex; align-items: center; justify-content: center; font-size: 12px; font-family: var(--font-heading); flex: none; }
.admin-avatar.admin-avatar-lg { width: 34px; height: 34px; font-size: 13px; }

.admin-table-card { padding: 8px; overflow-x: auto; }
.admin-table-card .table { margin: 0; }

.admin-drawer-backdrop { z-index: 40; justify-content: flex-end; }
.admin-drawer {
  width: 100%; max-width: 400px; height: 100vh; background: var(--color-surface);
  border-left: 1px solid color-mix(in srgb, var(--color-neutral-100) 12%, transparent);
  padding: 28px; overflow-y: auto; display: flex; flex-direction: column; gap: 20px;
}
.admin-drawer-head { display: flex; align-items: center; justify-content: space-between; }
.admin-drawer-section-title { margin: 0 0 10px; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: color-mix(in srgb, var(--color-text) 55%, transparent); }
.admin-drawer-footer { display: flex; flex-direction: column; gap: 10px; margin-top: auto; padding-top: 16px; border-top: 1px solid color-mix(in srgb, var(--color-neutral-100) 12%, transparent); }

.seg-opt.is-active { color: var(--color-accent); box-shadow: inset 0 0 0 1px var(--color-accent); }

@media (max-width: 900px) {
  .admin-shell { flex-direction: column; }
  .admin-sidebar { width: 100%; min-height: auto; flex-direction: row; flex-wrap: wrap; border-right: none; border-bottom: 1px solid color-mix(in srgb, var(--color-neutral-100) 10%, transparent); }
  .admin-nav-group { flex-direction: row; flex-wrap: wrap; }
  .admin-nav-section-title { display: none; }
}

/* Tutoriel de prise en main du dashboard (driver.js, voir js/dashboard-tour.js) —
   identité visuelle glassmorphism cohérente avec les autres modales du site
   (comparer avec .quota-modal-card). L'overlay assombri/flouté est déjà géré par
   driver.js nativement (overlayOpacity), seul le popover est restylé ici. */
.moe-tour-popover.driver-popover {
  all: revert;
  position: fixed;
  z-index: 1000000000;
  box-sizing: border-box;
  font-family: var(--font-body, inherit);
  background: color-mix(in srgb, var(--color-surface) 96%, transparent);
  backdrop-filter: blur(26px);
  -webkit-backdrop-filter: blur(26px);
  border: 1px solid color-mix(in srgb, var(--color-accent) 22%, transparent);
  border-top: 2px solid var(--color-accent);
  border-radius: var(--radius-lg, 16px);
  box-shadow: var(--shadow-lg);
  color: var(--color-text);
  padding: 22px 22px 18px;
  width: min(380px, calc(100vw - 32px));
  max-width: 380px;
}
.moe-tour-popover .driver-popover-title { color: var(--color-text); font-size: 17px; font-weight: 500; margin: 0; flex: 1; min-width: 0; }
.moe-tour-popover .driver-popover-description { color: color-mix(in srgb, var(--color-text) 78%, transparent); font-size: 13.5px; line-height: 1.6; margin: 0; }
.moe-tour-popover .moe-tour-error { margin: 8px 0 0; font-size: 12.5px; color: var(--color-accent-300); }
.moe-tour-popover .driver-popover-close-btn { color: color-mix(in srgb, var(--color-text) 55%, transparent); }
.moe-tour-popover .driver-popover-close-btn:hover, .moe-tour-popover .driver-popover-close-btn:focus { color: var(--color-text); }

/* Icône + titre : bloc maison remplaçant le titre brut de driver.js (voir
   addIconHeader dans js/dashboard-tour.js). */
.moe-tour-popover .moe-tour-header { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.moe-tour-popover .moe-tour-header .driver-popover-title { padding-right: 20px; }
.moe-tour-popover .moe-tour-icon {
  flex: none; width: 34px; height: 34px; border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--color-accent) 16%, transparent); color: var(--color-accent-300);
  display: flex; align-items: center; justify-content: center; font-size: 16px;
}
/* Variante centrée pour une étape courte (Stock), pour varier le format comme
   prévu par la maquette plutôt qu'un pavé uniforme à chaque étape. */
.moe-tour-popover.moe-tour-compact .moe-tour-header { flex-direction: column; text-align: center; gap: 8px; }
.moe-tour-popover.moe-tour-compact .moe-tour-icon { width: 48px; height: 48px; font-size: 22px; }
.moe-tour-popover.moe-tour-compact .moe-tour-header .driver-popover-title { padding-right: 0; }
.moe-tour-popover.moe-tour-compact .driver-popover-description { text-align: center; }

/* Étape X sur Y + barre de progression (voir addProgress). */
.moe-tour-popover .moe-tour-progress { margin-top: 14px; }
.moe-tour-popover .moe-tour-progress-label { margin: 0 0 6px; font-size: 11.5px; color: color-mix(in srgb, var(--color-text) 55%, transparent); }
.moe-tour-popover .moe-tour-progress-track { height: 4px; border-radius: 999px; background: color-mix(in srgb, var(--color-neutral-100) 12%, transparent); overflow: hidden; }
.moe-tour-popover .moe-tour-progress-fill { height: 100%; border-radius: 999px; background: var(--color-accent); transition: width .35s ease; }

/* Même style de progression/erreur que le tutoriel (voir juste au-dessus), réutilisé
   ici pour le questionnaire "Profil entreprise" de Paramètres (js/company-profile-
   wizard.js) — hors contexte popover, donc scopé à #profil-entreprise-card plutôt qu'à
   .moe-tour-popover. */
#profil-entreprise-card .moe-tour-progress { margin-top: 4px; }
#profil-entreprise-card .moe-tour-progress-label { margin: 0 0 6px; font-size: 11.5px; color: color-mix(in srgb, var(--color-text) 55%, transparent); }
#profil-entreprise-card .moe-tour-progress-track { height: 4px; border-radius: 999px; background: color-mix(in srgb, var(--color-neutral-100) 12%, transparent); overflow: hidden; }
#profil-entreprise-card .moe-tour-progress-fill { height: 100%; border-radius: 999px; background: var(--color-accent); transition: width .35s ease; }
#profil-entreprise-card .moe-tour-error { margin: 4px 0 0; font-size: 12.5px; color: var(--color-accent-300); }

.moe-tour-popover .driver-popover-footer { margin-top: 16px; }
.moe-tour-popover .driver-popover-footer-btn {
  font-family: inherit; font-size: 13.5px; font-weight: 500; padding: 8px 14px;
  border-radius: var(--radius-md); border: 1px solid var(--color-accent); color: var(--color-accent);
  background: transparent; transition: background .15s;
}
.moe-tour-popover .driver-popover-footer-btn:hover { background: color-mix(in srgb, var(--color-accent) 12%, transparent); }
.moe-tour-popover .driver-popover-navigation-btns .driver-popover-next-btn {
  border-color: var(--color-accent); background: var(--color-accent); color: var(--color-bg);
}
.moe-tour-popover .driver-popover-navigation-btns .driver-popover-next-btn:hover { background: var(--color-accent-400); }
.moe-tour-popover .driver-popover-arrow-side-left { border-right-color: color-mix(in srgb, var(--color-surface) 96%, transparent); }
.moe-tour-popover .driver-popover-arrow-side-right { border-left-color: color-mix(in srgb, var(--color-surface) 96%, transparent); }
.moe-tour-popover .driver-popover-arrow-side-top { border-bottom-color: color-mix(in srgb, var(--color-surface) 96%, transparent); }
.moe-tour-popover .driver-popover-arrow-side-bottom { border-top-color: color-mix(in srgb, var(--color-surface) 96%, transparent); }

/* Écran de fin (médaille + confettis) — voir showTourReward() dans
   js/dashboard-tour.js. Reprend le rythme visuel de mockups/refonte/Onboarding
   Tutoriel.dc.html plutôt qu'une simple dernière étape driver.js. */
@keyframes moe-tour-confetti-fall {
  0% { transform: translateY(-20px) rotate(0deg); opacity: 0; }
  10% { opacity: 1; }
  100% { transform: translateY(340px) rotate(280deg); opacity: 0; }
}
@keyframes moe-tour-badge-pulse {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--color-accent) 45%, transparent); }
  50% { box-shadow: 0 0 0 14px color-mix(in srgb, var(--color-accent) 0%, transparent); }
}
@media (prefers-reduced-motion: reduce) {
  .moe-tour-confetti span, .moe-tour-reward-badge { animation: none !important; }
}
.moe-tour-reward-backdrop {
  position: fixed; inset: 0; z-index: 1000000000; background: color-mix(in srgb, black 55%, transparent);
}
.moe-tour-reward-wrap {
  position: fixed; inset: 0; z-index: 1000000001; display: flex; align-items: center; justify-content: center; padding: 20px;
}
/* left:0 + right:0 + une largeur explicite est sur-contraint : le navigateur
   ignore "right" et colle l'élément à gauche de .moe-tour-reward-wrap (qui
   couvre tout l'écran), au lieu de centrer — d'où les confettis plaqués sur
   la sidebar au lieu d'être au-dessus de la carte. left:50% + translateX
   centre explicitement, sans dépendre de cette résolution de contrainte. */
.moe-tour-confetti { position: absolute; top: -40px; left: 50%; transform: translateX(-50%); overflow: hidden; pointer-events: none; height: 380px; width: min(380px, calc(100vw - 32px)); }
.moe-tour-reward-card {
  position: relative; width: min(380px, calc(100vw - 32px)); align-items: center; text-align: center;
  background: color-mix(in srgb, var(--color-surface) 88%, transparent);
  backdrop-filter: blur(26px); -webkit-backdrop-filter: blur(26px);
  border: 1px solid color-mix(in srgb, var(--color-accent) 25%, transparent);
  padding: 36px 30px; gap: 16px; box-shadow: var(--shadow-lg);
}
.moe-tour-reward-badge {
  width: 64px; height: 64px; border-radius: 999px; background: color-mix(in srgb, var(--color-accent) 18%, transparent);
  color: var(--color-accent-300); display: flex; align-items: center; justify-content: center; font-size: 30px;
  animation: moe-tour-badge-pulse 2s ease-out infinite;
}
.moe-tour-reward-title { margin: 0 0 6px; font-size: 20px; color: var(--color-text); }
.moe-tour-reward-text { margin: 0; font-size: 14px; line-height: 1.6; color: color-mix(in srgb, var(--color-text) 78%, transparent); }