/* =========================================================================
   IGORIA — Feuille de style unique
   Palette & composants fidèles à la maquette Claude Design.
   ========================================================================= */

:root {
  --cream:      #faf8f5;
  --cream-2:    #f3efe8;
  --paper:      #ffffff;
  --ink:        #16202b;   /* titres / texte fort */
  --ink-700:    #2b3a4a;
  --ink-500:    #5a6b7a;   /* texte secondaire */
  --ink-400:    #66727f;   /* gris discret, assombri pour l'accessibilité (contraste ≥ 4.5 sur fond clair) */
  --teal:       #1f9d90;   /* couleur d'Igor (primaire) */
  --teal-dark:  #17857b;
  --teal-soft:  #e7f4f2;
  --green:      #2f7d52;   /* bouton publier */
  --green-dark: #276845;
  --green-text: #3a9d63;
  --amber:      #f5a623;   /* étoiles / accents */
  --coral:      #ff8a65;
  --terra:      #d96c4f;   /* avis négatif */
  --line:       #e8e3db;   /* bordures */
  --line-2:     #d9d3c8;
  --ink-card:   #16202b;   /* cartes sombres */

  --radius:     16px;
  --radius-sm:  10px;
  --radius-lg:  22px;
  --shadow:     0 1px 2px rgba(22,32,43,.05), 0 8px 24px rgba(22,32,43,.06);
  --shadow-sm:  0 1px 2px rgba(22,32,43,.06);

  --font-display: "Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;
  --font-serif:   "Source Serif 4", Georgia, "Times New Roman", serif;
  --font-sans:    "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SFMono-Regular", monospace;

  --wrap: 1120px;
}

/* --------------------------------- Reset -------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  font-family: var(--font-sans);
  background: var(--cream);
  color: var(--ink);
  line-height: 1.6;
  font-size: 17px;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip; /* filet anti-débordement horizontal (préserve le header sticky, contrairement à hidden) */
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }

/* ------------------------------- Layout --------------------------------- */
.wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: 24px; }
.section { padding: 72px 0; }
.section--tight { padding: 48px 0; }
.section--cream2 { background: var(--cream-2); }
.divider { border-top: 1px solid var(--line); }

/* ----------------------------- Typographie ------------------------------ */
h1, h2, h3, h4 { font-family: var(--font-display); color: var(--ink); line-height: 1.08; letter-spacing: -0.01em; font-weight: 800; }
h1 { font-size: clamp(2.4rem, 5vw, 3.6rem); }
h2 { font-size: clamp(1.8rem, 3.4vw, 2.5rem); }
h3 { font-size: 1.22rem; font-weight: 700; }
.lead, .serif { font-family: var(--font-serif); }
.eyebrow {
  font-family: var(--font-sans); font-weight: 600; font-size: .82rem;
  letter-spacing: .02em; color: var(--teal-dark); text-transform: none;
  display: inline-flex; align-items: center; gap: 8px;
}
.eyebrow::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--teal); }
.text-teal { color: #12766b; } /* teal foncé accessible pour les liens en texte (contraste ≥ 4.5) */
.muted { color: var(--ink-500); }
.serif-body { font-family: var(--font-serif); color: var(--ink-700); }

/* ------------------------------- Boutons -------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--font-sans); font-weight: 600; font-size: .98rem;
  padding: 13px 22px; border-radius: 12px; border: 1px solid transparent;
  transition: transform .06s ease, background .15s ease, box-shadow .15s ease;
  line-height: 1;
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--teal); color: #fff; }
.btn-primary:hover { background: var(--teal-dark); }
.btn-dark { background: var(--ink); color: #fff; }
.btn-dark:hover { background: #0d151d; }
.btn-green { background: var(--green); color: #fff; }
.btn-green:hover { background: var(--green-dark); }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--line-2); }
.btn-ghost:hover { background: var(--cream-2); }
.btn-link { background: none; color: var(--ink); font-weight: 600; padding: 13px 6px; border: 0; }
.btn-link:hover { color: var(--teal-dark); }
.btn-block { width: 100%; }
.btn-sm { padding: 9px 14px; font-size: .88rem; border-radius: 10px; }

/* -------------------------------- Header -------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--cream) 88%, transparent);
  backdrop-filter: saturate(1.4) blur(8px);
  border-bottom: 1px solid transparent;
}
.site-header.scrolled { border-bottom-color: var(--line); }
.nav { display: flex; align-items: center; justify-content: space-between; height: 72px; gap: 20px; }
.brand { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-display); font-weight: 800; font-size: 1.28rem; color: var(--ink); letter-spacing: -.02em; }
.brand .ia { color: var(--teal-dark); }
.brand svg { flex: none; }
.nav-links { display: flex; align-items: center; gap: 6px; }
/* nowrap : « À quoi sert Igor ? » et « Essayer gratuitement » se cassaient sur
   deux lignes entre 900 et 1200 px, ce qui déformait la hauteur de la barre.
   Entre ces largeurs, on resserre l'espacement plutôt que de couper les mots. */
.nav-links a { padding: 8px 12px; border-radius: 8px; color: var(--ink-700); font-weight: 500; font-size: .96rem; white-space: nowrap; }
.nav-links a:hover, .nav-links a.active { color: var(--ink); background: var(--cream-2); }
.nav-right { display: flex; align-items: center; gap: 12px; }
.nav-right .btn { white-space: nowrap; }

/* Zone serrée : le menu burger n'apparaît qu'à 900 px, or la barre complète ne
   tient plus confortablement dès ~1180 px. On rétrécit progressivement. */
@media (max-width: 1180px) {
  .nav-links { gap: 2px; }
  .nav-links a { padding: 8px 9px; font-size: .92rem; }
  .nav-right { gap: 8px; }
}
@media (max-width: 1040px) {
  .nav-links a { padding: 7px 7px; font-size: .88rem; }
  .nav-right .btn { padding-inline: 12px; font-size: .9rem; }
}
.user-menu { position: relative; }
.user-menu summary { list-style: none; display: inline-flex; align-items: center; gap: 7px; cursor: pointer; font-weight: 700; color: var(--ink-700); padding: 7px 10px; border: 1px solid var(--line); border-radius: 12px; background: var(--paper); }
.user-menu summary::-webkit-details-marker { display: none; }
.user-avatar { display: grid; place-items: center; width: 25px; height: 25px; border-radius: 50%; background: var(--teal-soft); font-size: .83rem; }
.user-menu .chev { color: var(--ink-400); }
.user-menu-panel { position: absolute; z-index: 10; right: 0; top: calc(100% + 8px); width: 230px; padding: 7px; border: 1px solid var(--line); border-radius: 12px; background: var(--paper); box-shadow: var(--shadow); }
.user-menu-panel a, .user-menu-panel button { display: block; width: 100%; padding: 10px; border: 0; border-radius: 8px; background: none; text-align: left; color: var(--ink-700); font: 500 .88rem var(--font-sans); }
.user-menu-panel a:hover, .user-menu-panel button:hover { background: var(--cream-2); color: var(--ink); }
.lang { display: inline-flex; align-items: center; gap: 6px; font-size: .85rem; color: var(--ink-500); font-weight: 600; background: none; border: 0; }
.nav-toggle { display: none; background: none; border: 0; padding: 6px; color: var(--ink); }
.nav-mobile-only { display: none; } /* liens réservés au menu burger mobile (Connexion, langue) */

/* --------------------------------- Hero --------------------------------- */
.hero { padding: 56px 0 40px; }
.hero-grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: 48px; align-items: center; }
.hero h1 { margin: 16px 0 20px; }
.hero .lead { font-size: 1.24rem; color: var(--ink-700); max-width: 30ch; }
.hero-cta { display: flex; align-items: center; gap: 10px; margin: 28px 0 22px; flex-wrap: wrap; }
.hero-checks { display: flex; flex-wrap: wrap; gap: 10px 26px; color: var(--ink-500); font-size: .95rem; }
.hero-checks span { display: inline-flex; align-items: center; gap: 8px; }
.check::before { content: "✓"; color: var(--teal); font-weight: 800; }

/* ----------------------------- Carte démo ------------------------------- */
.demo-card {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-lg);
  box-shadow: var(--shadow); padding: 22px;
}
.demo-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 4px; }
.demo-head h3 { font-family: var(--font-sans); font-weight: 700; font-size: 1.02rem; }
.demo-head .tiny { color: var(--ink-400); font-size: .82rem; }
.demo-sub { color: var(--ink-500); font-size: .92rem; margin: 8px 0 12px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.chip {
  border: 1px solid var(--line-2); background: var(--cream); color: var(--ink-700);
  padding: 8px 14px; border-radius: 999px; font-size: .88rem; font-weight: 600;
}
.chip:hover, .chip.active { border-color: var(--teal); color: var(--teal-dark); background: var(--teal-soft); }
.demo-card textarea {
  width: 100%; min-height: 96px; resize: vertical; border: 1px solid var(--line-2);
  border-radius: 12px; padding: 12px 14px; font-family: var(--font-serif); font-size: 1rem;
  color: var(--ink); background: var(--cream); line-height: 1.5;
}
.demo-card textarea:focus { outline: 2px solid var(--teal); outline-offset: 1px; border-color: var(--teal); }
.demo-controls { display: flex; align-items: flex-end; gap: 16px; margin-top: 14px; flex-wrap: wrap; }
.field label { display: block; font-size: .78rem; color: var(--ink-500); font-weight: 600; margin-bottom: 5px; }
.field select {
  border: 1px solid var(--line-2); border-radius: 10px; padding: 9px 12px; background: var(--paper);
  font-family: var(--font-sans); font-size: .92rem; color: var(--ink);
}
.stars { display: inline-flex; gap: 2px; font-size: 1.15rem; color: var(--line-2); user-select: none; }
.stars .on { color: var(--amber); }
.stars.interactive span { cursor: pointer; }
.demo-controls .btn { margin-left: auto; }
.demo-result { margin-top: 16px; }
.igor-typing { display: flex; align-items: center; gap: 12px; color: var(--ink-500); font-size: .92rem; margin-top: 16px; }
.dots span { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--teal); margin-right: 3px; animation: blink 1.2s infinite; }
.dots span:nth-child(2){ animation-delay: .2s; } .dots span:nth-child(3){ animation-delay: .4s; }
@keyframes blink { 0%,60%,100%{opacity:.25} 30%{opacity:1} }
.reply-box {
  margin-top: 16px; border: 1px solid var(--teal); background: var(--teal-soft);
  border-radius: 14px; padding: 14px 16px;
}
.reply-box .tag { color: var(--teal-dark); font-weight: 700; font-size: .78rem; margin-bottom: 6px; }
.reply-box p { font-family: var(--font-serif); color: var(--ink); }
.reply-flag { margin-top: 8px; font-size: .82rem; color: var(--terra); font-weight: 600; }
.demo-after { margin-top: 12px; font-size: .9rem; color: var(--ink-500); }

/* ---------------------------- Barre plateformes ------------------------- */
.platforms { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 36px; color: var(--ink-500); }
.platforms .label { font-weight: 600; font-size: .82rem; color: var(--ink-400); margin-right: 6px; }
.pill { border: 1px solid var(--line); background: var(--paper); border-radius: 10px; padding: 8px 12px; font-size: .86rem; font-weight: 600; color: var(--ink-700); display: inline-flex; gap: 8px; align-items: center; }
.platform-icon { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 6px; color: #fff; font: 800 .76rem/1 var(--font-sans); }
.platform-google { background: conic-gradient(from 45deg, #4285f4 0 25%, #34a853 0 50%, #fbbc05 0 75%, #ea4335 0); text-shadow: 0 1px 1px rgba(0,0,0,.2); }
.platform-facebook { background: #1877f2; font-size: 1rem; font-family: Arial,sans-serif; }.platform-trustpilot { background: #00b67a; font-size: .67rem; }.platform-tripadvisor { background: #34e0a1; color: #101b1a; font-size: .95rem; }.platform-booking { background: #003580; font-size: .82rem; }
.pill em { font-style: normal; font-weight: 500; font-size: .78rem; color: var(--ink-400); }
.pill .ok { color: var(--green-text); }

/* -------------------------------- Étapes -------------------------------- */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 34px; }
.step { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; box-shadow: var(--shadow-sm); }
.step.dark { background: var(--ink-card); border-color: var(--ink-card); color: #dce4ea; }
.step.dark h3 { color: #fff; }
.step-num { width: 30px; height: 30px; border-radius: 8px; background: var(--ink); color: #fff; display: grid; place-items: center; font-weight: 700; font-size: .95rem; font-family: var(--font-display); margin-bottom: 14px; }
.step.dark .step-num { background: var(--teal); }
/* Section « bénéfices » : pictos emoji sur pastille teal (distincts des étapes numérotées). */
.benefits .step-num { background: var(--teal-soft); width: 40px; height: 40px; border-radius: 11px; font-size: 1.35rem; }
.step h3 { margin-bottom: 8px; }
.step p { color: var(--ink-500); font-size: .96rem; }
.step.dark p { color: #aeb9c3; }
.email-mini { margin-top: 14px; background: #fff; color: var(--ink); border-radius: 12px; padding: 12px; }
.email-mini .from { font-size: .72rem; color: var(--ink-400); }
.email-mini .subj { font-weight: 700; font-size: .9rem; margin: 2px 0 8px; }
.email-mini .rev { font-family: var(--font-serif); font-size: .84rem; color: var(--ink-700); background: var(--cream); border-radius: 8px; padding: 8px 10px; }
.email-mini .resp { position: relative; margin-top: 8px; background: var(--teal-soft); border: 1px solid #cfe8e4; border-left: 3px solid var(--teal); border-radius: 8px; padding: 8px 10px 14px; overflow: hidden; }
.email-mini .resp-label { font-size: .68rem; font-weight: 700; letter-spacing: .02em; color: var(--teal-dark); text-transform: uppercase; margin-bottom: 4px; }
.email-mini .resp-igor { color: var(--teal); }
.email-mini .resp p { margin: 0; font-family: var(--font-serif); font-size: .84rem; line-height: 1.5; color: var(--ink-700); }
.email-mini .resp::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 22px; background: linear-gradient(to bottom, rgba(231,244,242,0), var(--teal-soft)); }
.email-mini .acts { display: flex; gap: 6px; margin-top: 10px; }
.autopilot-banner { margin-top: 20px; background: var(--teal-soft); border: 1px solid #cfe8e4; border-radius: 12px; padding: 14px 18px; color: var(--teal-dark); font-weight: 500; font-size: .95rem; }

/* Section « Comment ça marche » : 4 étapes (2×2 à gauche) + démo email à droite */
.how-steps { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 18px; margin-top: 34px; align-items: stretch; }
.how-steps .steps-left { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 18px; }
.how-steps .steps-left .step { margin: 0; display: flex; flex-direction: column; }
.how-steps .step-demo { margin: 0; display: flex; flex-direction: column; }
.how-steps .step-demo .email-mini { margin-top: 12px; }
.demo-label { display: inline-flex; align-items: center; gap: 7px; font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--teal); }
.step.dark .demo-label { color: #6fd3c7; }
.demo-foot { margin-top: auto; padding-top: 18px; font-family: var(--font-serif); font-size: .95rem; line-height: 1.5; color: #aeb9c3; }
.demo-foot strong { color: #fff; font-weight: 600; }

/* -------------------------------- Preuve -------------------------------- */
.stat-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.stat h3 { font-family: var(--font-display); color: var(--teal-dark); font-size: 1.6rem; }
.stat p { color: var(--ink-500); font-size: .94rem; }
.quotes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 28px; }
.quote { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; box-shadow: var(--shadow-sm); }
.quote .stars { font-size: .95rem; margin-bottom: 10px; }
.quote p { font-family: var(--font-serif); color: var(--ink); }
.quote .who { margin-top: 12px; font-size: .84rem; color: var(--ink-400); font-family: var(--font-sans); }
.reassure { margin-top: 26px; font-family: var(--font-serif); color: var(--ink-500); max-width: 62ch; }

/* --------------------------- Configurateur prix ------------------------- */
.pricing-grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: 28px; align-items: start; margin-top: 30px; }
.config { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; box-shadow: var(--shadow-sm); }
.presets { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.config .row { display: flex; align-items: center; justify-content: space-between; padding: 14px 0; border-top: 1px solid var(--line); }
.config .row:first-of-type { border-top: 0; }
.config label.opt { display: flex; align-items: center; gap: 12px; font-weight: 600; cursor: pointer; }
.config .price-plus { color: var(--ink-400); font-size: .88rem; font-weight: 600; }
.config .price-plus.discount { color: var(--green-text); font-weight: 700; }
/* Google inclus (précoché) + plateformes à venir (non cochables). */
.config .row.is-included label.opt { cursor: default; }
.config .price-plus.included { color: var(--teal-dark); font-weight: 700; }
.config .row.is-soon { opacity: .68; }
.config .row.is-soon label.opt { cursor: not-allowed; }
.config .price-plus.soon { color: var(--ink-500); font-weight: 600; font-size: .76rem; background: var(--cream-2); padding: 3px 9px; border-radius: 20px; }
.config input[type=checkbox]:disabled { accent-color: var(--ink-300, #b7c0c9); }
.range-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; }
.range-head strong { font-family: var(--font-display); }
.range-head .val { color: var(--teal-dark); font-weight: 800; font-family: var(--font-display); }
input[type=range] { width: 100%; accent-color: var(--teal); }
input[type=checkbox] { width: 18px; height: 18px; accent-color: var(--teal); }
.section-label { font-weight: 700; font-size: .82rem; color: var(--ink-500); margin: 16px 0 4px; }

.summary { background: var(--ink-card); color: #fff; border-radius: var(--radius); padding: 24px; box-shadow: var(--shadow); position: sticky; top: 90px; }
.summary .tag { color: var(--teal); font-weight: 700; font-size: .82rem; }
.summary .big { font-family: var(--font-display); font-size: 3rem; font-weight: 800; line-height: 1; margin: 8px 0 4px; }
.summary .big small { font-size: 1rem; font-weight: 600; color: #aeb9c3; }
.summary .note { color: #aeb9c3; font-size: .9rem; }
.summary .lines { margin: 18px 0; border-top: 1px solid rgba(255,255,255,.12); }
.summary .lines .l { display: flex; justify-content: space-between; padding: 8px 0; font-size: .92rem; color: #cfd8de; border-bottom: 1px solid rgba(255,255,255,.06); }
.summary .lines .l span:last-child { color: #fff; font-weight: 600; }
.summary .trial { text-align: center; color: #aeb9c3; font-size: .82rem; margin-top: 10px; }

.agency-band { background: var(--cream-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 26px; display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-top: 24px; }
.agency-band .eyebrow { margin-bottom: 8px; }
.agency-band .price { text-align: right; }
.agency-band .price .amount { font-family: var(--font-display); font-size: 2rem; font-weight: 800; }

/* --------------------------------- FAQ ---------------------------------- */
.faq { max-width: 820px; margin: 30px auto 0; }
.faq-item { border: 1px solid var(--line); background: var(--paper); border-radius: 12px; margin-bottom: 10px; box-shadow: var(--shadow-sm); }
.faq-q { width: 100%; text-align: left; background: none; border: 0; padding: 18px 20px; font-weight: 600; font-size: 1rem; color: var(--ink); display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.faq-q .ico { color: var(--teal); font-size: 1.3rem; flex: none; transition: transform .2s; }
.faq-item.open .faq-q .ico { transform: rotate(45deg); }
.faq-a { max-height: 0; overflow: hidden; transition: max-height .25s ease; }
.faq-a .inner { padding: 0 20px 18px; color: var(--ink-500); font-family: var(--font-serif); }

/* ------------------------------ CTA final ------------------------------- */
.cta-final { background: var(--ink-card); color: #fff; border-radius: var(--radius-lg); padding: 40px; display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.cta-final h2 { color: #fff; max-width: 16ch; }
/* Variante centrée : titre + sous-texte + action alignés au centre (évite le vide). */
.cta-final--center { flex-direction: column; align-items: center; text-align: center; gap: 6px; }
.cta-final--center h2 { max-width: 24ch; margin-inline: auto; }
.cta-final--center .cta-action { margin-top: 12px; }
.cta-final p, .article .cta-final p { color: #b6c2cc; margin-top: 8px; font-family: var(--font-serif); }
.cta-final .cta-side { display: flex; align-items: center; gap: 14px; }
/* Bouton clair sur fond sombre : contraste fort, pas de bloc terne. */
.cta-final .btn-primary { background: #fff; color: var(--ink); border-color: #fff; }
.cta-final .btn-primary:hover { background: var(--teal); color: #fff; border-color: var(--teal); }
.cta-final small { color: #aeb9c3; }
.cta-final .cta-action { background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.13); border-radius: 16px; padding: 15px 18px; }
.cta-final .cta-action img, .cta-final .cta-action svg { margin-left: 4px; }
.enterprise-quote { position: relative; isolation: isolate; overflow: hidden; margin-top: 14px; min-height: 118px; display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 24px; padding: 20px 25px; border: 1px solid #253745; border-radius: var(--radius); background: var(--ink-card); color: #fff; box-shadow: var(--shadow-sm); }
.enterprise-quote::after { content: ""; position: absolute; z-index: -1; width: 230px; height: 230px; right: -85px; top: -125px; border-radius: 50%; background: rgba(28,166,154,.22); }
.enterprise-copy { max-width: 690px; }.enterprise-kicker { display: block; margin-bottom: 5px; color: #75d8cc; text-transform: uppercase; letter-spacing: .08em; font-size: .72rem; font-weight: 800; }.enterprise-quote strong { display: block; font: 800 1.18rem var(--font-display); }.enterprise-quote p { margin: 5px 0 0; color: #c5d1d8; font-family: var(--font-serif); }.enterprise-quote .enterprise-igor { align-self: end; margin-bottom: -20px; }.enterprise-quote .btn { white-space: nowrap; background: #fff; color: var(--ink); border-color: #fff; }.enterprise-quote .btn:hover { background: var(--teal); border-color: var(--teal); color: #fff; }

/* -------------------------------- Footer -------------------------------- */
.site-footer { border-top: 1px solid var(--line); background: var(--cream-2, #f3efe8); padding: 48px 0 22px; margin-top: 56px; }
.footer-grid { display: grid; grid-template-columns: 1.7fr 1fr 1fr 1fr 1fr; gap: 30px 28px; }
.footer-brand { max-width: 320px; }
.footer-brand .brand { margin-bottom: 12px; }
.footer-brand .blurb { color: var(--ink-500); font-size: .9rem; line-height: 1.6; margin: 0 0 12px; }
.footer-brand .made { color: var(--ink-400); font-size: .84rem; margin: 0; }
.footer-col h4 { font-size: .74rem; text-transform: uppercase; letter-spacing: .07em; color: var(--ink-400); font-weight: 700; margin: 2px 0 14px; }
.footer-col a { display: block; color: var(--ink-700); font-size: .92rem; margin-bottom: 10px; text-decoration: none; transition: color .14s; }
.footer-col a:hover { color: var(--teal-dark); }
.footer-bottom { display: flex; justify-content: space-between; align-items: center; gap: 10px 20px; flex-wrap: wrap; border-top: 1px solid var(--line-2, #d9d3c8); margin-top: 34px; padding-top: 18px; color: var(--ink-400); font-size: .84rem; }
@media (max-width: 860px) { .footer-grid { grid-template-columns: 1fr 1fr; gap: 26px; } .footer-brand { grid-column: 1 / -1; max-width: none; } }
@media (max-width: 520px) { .footer-grid { grid-template-columns: 1fr 1fr; } .footer-bottom { flex-direction: column; align-items: flex-start; } }

/* ------------------------------- Article -------------------------------- */
/* La colonne de texte est bornée pour la lisibilité et CENTRÉE une seule fois,
   sur le conteneur. Tous les blocs (titres, paragraphes, encarts) partagent
   alors exactement le même bord gauche — rendu cohérent, y compris en 4K. */
.article { max-width: 840px; margin-inline: auto; background: var(--paper); border: 1px solid var(--line); border-radius: 18px; padding: 44px 52px; box-shadow: 0 1px 3px rgba(22, 32, 43, .05); }
@media (max-width: 900px) { .article { margin-inline: 18px; padding: 30px 22px; border-radius: 14px; } }
.article > h1, .article > h2, .article > h3, .article > p, .article > ul,
.article > ol, .article > .eyebrow, .article > .callout, .article > .lead,
.article > blockquote, .article > .internal-links, .article > .cta-final { max-width: 100%; margin-inline: 0; }
.article h2 { margin: 40px 0 14px; }
.article h3 { margin: 26px 0 10px; }
.article p, .article li { font-family: var(--font-serif); color: var(--ink-700); font-size: 1.08rem; }
.article p { margin-bottom: 16px; }
.article ul { margin: 0 0 18px 22px; }
.article li { margin-bottom: 8px; }
.article .callout { background: var(--teal-soft); border-left: 4px solid var(--teal); border-radius: 10px; padding: 18px 20px; margin: 24px 0; }
.article .callout p { margin: 0; color: var(--ink); }
.internal-links { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; margin-top: 20px; }
.link-card { border: 1px solid var(--line); border-radius: 12px; padding: 18px; background: var(--paper); box-shadow: var(--shadow-sm); }
.link-card:hover { border-color: var(--teal); }
.link-card strong { display: block; margin-bottom: 4px; }
.link-card span { font-size: .9rem; color: var(--ink-500); }

/* ------------------------------- Flash ---------------------------------- */
.flash { border-radius: 12px; padding: 14px 18px; margin-bottom: 18px; font-weight: 500; font-size: .95rem; }
.flash.success { background: #e7f6ee; color: var(--green-dark); border: 1px solid #c6e8d5; }
.flash.error { background: #fdece6; color: #a8442a; border: 1px solid #f3cbbc; }

/* ------------------------------- Auth ----------------------------------- */
.auth-wrap { min-height: 100vh; display: grid; place-items: center; padding: 40px 20px; background: var(--cream); }
.auth-card { width: 100%; max-width: 420px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 34px; box-shadow: var(--shadow); }
.auth-card .brand { justify-content: center; margin-bottom: 18px; }
.auth-card h1 { font-size: 1.6rem; text-align: center; margin-bottom: 6px; }
.auth-card .sub { text-align: center; color: var(--ink-500); margin-bottom: 22px; font-family: var(--font-serif); }
.form-group { margin-bottom: 16px; }
.form-group label { display: block; font-size: .85rem; font-weight: 600; margin-bottom: 6px; color: var(--ink-700); }
.form-group input, .form-group textarea, .form-group select {
  width: 100%; border: 1px solid var(--line-2); border-radius: 10px; padding: 11px 13px;
  font-family: var(--font-sans); font-size: 1rem; color: var(--ink); background: var(--paper);
}
.form-group input:focus, .form-group textarea:focus, .form-group select:focus { outline: 2px solid var(--teal); outline-offset: 1px; border-color: var(--teal); }
.auth-alt { text-align: center; margin-top: 18px; font-size: .92rem; color: var(--ink-500); }
.auth-alt a { color: var(--teal-dark); font-weight: 600; }
.hp { position: absolute; left: -9999px; opacity: 0; height: 0; width: 0; }

/* --------------------- Auth : refonte pro & friendly -------------------- */
.auth-wrap {
  position: relative; overflow: hidden;
  background:
    radial-gradient(1100px 520px at 15% -10%, var(--teal-soft) 0%, transparent 55%),
    radial-gradient(900px 500px at 100% 110%, #fdeee6 0%, transparent 55%),
    var(--cream);
}
.auth-card { max-width: 430px; padding: 30px 34px 34px; box-shadow: 0 2px 6px rgba(22,32,43,.05), 0 24px 60px rgba(22,32,43,.10); }
.auth-card .brand { margin-bottom: 6px; }
.auth-hero { display: flex; flex-direction: column; align-items: center; text-align: center; margin: 6px 0 18px; }
.auth-hero .auth-igor { width: 86px; height: 86px; display: grid; place-items: center; border-radius: 50%; background: var(--teal-soft); border: 1px solid #d3ebe7; margin-bottom: 12px; animation: igor-bob 4s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .auth-hero .auth-igor { animation: none; } }
.auth-card h1 { font-size: 1.55rem; margin-bottom: 4px; letter-spacing: -.02em; }
.auth-card .sub { margin-bottom: 0; font-size: .96rem; }
.auth-form { margin-top: 4px; }
.auth-form .form-group { margin-bottom: 14px; }
.auth-form .form-row { display: flex; gap: 12px; }
.auth-form .form-row .form-group { flex: 1; min-width: 0; }
.field-hint { display: block; margin-top: 5px; font-size: .78rem; color: var(--ink-400); }
@media (max-width: 380px) { .auth-form .form-row { flex-direction: column; gap: 0; } }
.auth-form label { display: flex; align-items: center; justify-content: space-between; }
.auth-forgot { font-size: .82rem; font-weight: 600; color: var(--teal-dark); background: none; border: 0; padding: 0; cursor: pointer; }
.auth-forgot:hover { text-decoration: underline; }
.pw-field { position: relative; }
.pw-field input { padding-right: 44px; }
.pw-toggle { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 34px; height: 34px; display: grid; place-items: center; background: none; border: 0; color: var(--ink-400); border-radius: 8px; cursor: pointer; font-size: 1.05rem; }
.pw-toggle:hover { color: var(--ink-700); background: var(--cream-2); }
.auth-form .btn-primary { margin-top: 6px; box-shadow: 0 10px 22px rgba(31,157,144,.22); }
.auth-sep { display: flex; align-items: center; gap: 12px; margin: 18px 0 4px; color: var(--ink-400); font-size: .8rem; }
.auth-sep::before, .auth-sep::after { content: ""; height: 1px; background: var(--line); flex: 1; }
.auth-trust { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 16px; margin-top: 16px; color: var(--ink-500); font-size: .82rem; }
.auth-trust span { display: inline-flex; align-items: center; gap: 6px; }
.auth-trust span::before { content: "✓"; color: var(--teal); font-weight: 800; }

/* ------------------------- Modal générique (réutilisable) --------------- */
.modal-ov { position: fixed; inset: 0; z-index: 2147481500; display: none; align-items: center; justify-content: center; padding: 20px; background: rgba(16,24,32,.55); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.modal-ov.open { display: flex; animation: tour-fade .2s ease; }
.modal { position: relative; background: #fff; border-radius: 18px; max-width: 460px; width: 100%; padding: 28px; box-shadow: 0 30px 80px rgba(0,0,0,.32); max-height: 88vh; overflow: auto; }
.modal-x { position: absolute; top: 12px; right: 14px; background: none; border: 0; font-size: 1.15rem; color: var(--ink-400); cursor: pointer; line-height: 1; }
.modal-x:hover { color: var(--ink); }
.modal-igor { display: flex; justify-content: center; margin-bottom: 8px; }
.modal h3 { font-family: var(--font-display); font-weight: 800; letter-spacing: -.02em; margin: 0 0 6px; font-size: 1.3rem; }
.modal .modal-sub { color: var(--ink-500); font-size: .92rem; margin-bottom: 16px; }
.modal .modal-recipients { background: var(--cream); border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; margin-bottom: 16px; font-size: .88rem; }
.modal .modal-recipients strong { color: var(--ink); }
.modal .modal-recipients ul { margin: 6px 0 0; padding-left: 18px; color: var(--ink-700); }
.modal .modal-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 6px; flex-wrap: wrap; }
.modal .modal-recap { background: var(--cream); border: 1px solid var(--line); border-radius: 10px; padding: 6px 14px; margin-bottom: 18px; }
.modal .modal-recap > div { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: .9rem; }
.modal .modal-recap > div:last-child { border-bottom: 0; }
.modal .modal-recap span { color: var(--ink-500); }
.modal .modal-recap strong { color: var(--ink); font-weight: 600; text-align: right; word-break: break-word; }
.btn-danger { background: var(--terra); color: #fff; }
.btn-danger:hover { background: #c25b3f; }
.btn.is-disabled { opacity: .5; cursor: not-allowed; pointer-events: auto; }

/* ---------------------------- Back office ------------------------------- */
.back { display: grid; grid-template-columns: 240px 1fr; min-height: 100vh; background: var(--cream); align-items: start; }
/* La barre de gauche est fixée (largeur + hauteur) : elle ne s'étire plus selon
   le contenu de droite. Le contenu principal scrolle indépendamment. */
/* Scopé à .back : évite que la classe .side ne « fuite » sur les pages publiques. */
.back > .side { position: sticky; top: 0; align-self: start; height: 100vh; overflow-y: auto; overscroll-behavior: contain; background: var(--paper); border-right: 1px solid var(--line); padding: 20px 16px; display: flex; flex-direction: column; }
.side::-webkit-scrollbar { width: 7px; }
.side::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 4px; }
/* Quand un admin consulte un compte, la barre de consultation occupe le haut. */
body.impersonating .side { top: 46px; height: calc(100vh - 46px); }
.side .brand { margin: 6px 8px 20px; font-size: 1.15rem; }
.side .grp { font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-400); margin: 4px 10px 10px; font-weight: 700; }
/* Chaque lien de nav : [icône][libellé …][badge]. L'accent (--acc) est défini par
   catégorie ci-dessous ; il colore l'icône, la barre latérale et le fond de l'actif,
   tandis que le TEXTE reste foncé (contraste garanti). */
.side nav { --acc: var(--teal-dark); }
.side nav a { position: relative; display: flex; align-items: center; justify-content: flex-start; gap: 11px; padding: 9px 12px; border-radius: 10px; color: var(--ink-700); font-weight: 500; font-size: .95rem; margin-bottom: 1px; transition: background .14s ease, color .14s ease; }
.side nav a .nav-ico { flex: none; color: var(--ink-400); transition: color .14s ease, transform .14s ease; }
.side nav a .nav-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.side nav a:hover { background: var(--cream-2); color: var(--ink); }
.side nav a:hover .nav-ico { color: var(--acc); }
.side nav a.active { background: color-mix(in srgb, var(--acc) 13%, var(--paper)); color: var(--ink); font-weight: 600; }
.side nav a.active .nav-ico { color: var(--acc); }
.side nav a.active::before { content: ""; position: absolute; left: 3px; top: 50%; transform: translateY(-50%); width: 3px; height: 17px; border-radius: 2px; background: var(--acc); }
.side nav a .badge { flex-shrink: 0; white-space: nowrap; background: var(--cream-2); color: var(--ink-500); border-radius: 20px; font-size: .74rem; padding: 1px 8px; font-weight: 700; }
.side nav a:hover .badge { background: var(--paper); }
.side nav a.active .badge { background: color-mix(in srgb, var(--acc) 22%, var(--paper)); color: var(--acc); }
.nav-solo { --acc: var(--teal-dark); }
/* --- Menu rangé par catégories repliables --- */
.nav-group { --acc: var(--teal-dark); margin: 2px 0; }
.nav-group + .nav-group, .nav-solo + .nav-group { margin-top: 7px; padding-top: 8px; border-top: 1px solid var(--line); }
.nav-group-head { display: flex; align-items: center; width: 100%; gap: 8px;
  background: none; border: 0; cursor: pointer; padding: 6px 12px 6px 10px; margin: 2px 0 3px;
  font-size: .7rem; text-transform: uppercase; letter-spacing: .05em; font-weight: 800; color: var(--ink);
  font-family: inherit; border-radius: 8px; }
.nav-group-dot { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--acc); }
.nav-group-label { flex: 1; text-align: left; }
.nav-group-head:hover { color: var(--ink); background: var(--cream-2); }
.nav-chevron { flex: none; transition: transform .22s ease; font-size: .78rem; line-height: 1; color: var(--ink-400); }
.nav-group.is-open > .nav-group-head .nav-chevron { transform: rotate(180deg); }
.nav-group-items { overflow: hidden; max-height: 0; opacity: .4; transition: max-height .24s ease, opacity .2s ease; }
.nav-group.is-open > .nav-group-items { max-height: 420px; opacity: 1; }
/* Code couleur par catégorie (le libellé reste foncé, seul l'accent varie). */
.nav-group[data-nav-group="navg-pilotage"]      { --acc: var(--teal-dark); }
.nav-group[data-nav-group="navg-clients-avis"]   { --acc: var(--amber); }
.nav-group[data-nav-group="navg-croissance"]     { --acc: var(--green); }
.nav-group[data-nav-group="navg-statistiques"]   { --acc: var(--teal-dark); }
.nav-group[data-nav-group="navg-redaction"]      { --acc: var(--terra); }
.nav-group[data-nav-group="navg-mon-activite"]    { --acc: var(--amber); }
.nav-group[data-nav-group="navg-igor-formation"]  { --acc: var(--teal-dark); }
.nav-group[data-nav-group="navg-mon-compte"]      { --acc: var(--ink-500); }
.side .foot { margin-top: auto; padding: 12px 10px 4px; border-top: 1px solid var(--line); font-size: .82rem; color: var(--ink-500); }
.side .foot .who { font-weight: 600; color: var(--ink); margin-bottom: 8px; }

.main { padding: 26px 34px; overflow-x: auto; }
.main-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 22px; flex-wrap: wrap; }
.main-head .t h1 { font-size: 1.7rem; }
.main-head .t p { color: var(--ink-500); font-family: var(--font-serif); margin-top: 2px; }
.main-head .sync { color: var(--ink-400); font-size: .82rem; }

/* --- Messages de contact (« Prospects ») : boîte de réception en cartes --- */
.lead-counts { display: flex; flex-wrap: wrap; gap: 8px; }
.lead-count { font-size: .82rem; color: var(--ink-500); background: var(--paper); border: 1px solid var(--line); border-radius: 20px; padding: 4px 12px; }
.lead-count strong { color: var(--ink); }
.lead-count--nouveau strong { color: var(--teal-dark); }
.lead-count--contacté strong { color: #b7791f; }
.lead-count--converti strong { color: var(--green); }
.lead-empty { background: var(--paper); border: 1px dashed var(--line-2); border-radius: 14px; padding: 30px; text-align: center; }
.lead-section { margin-bottom: 26px; }
.lead-section-head { display: flex; align-items: center; gap: 9px; font-size: .95rem; font-family: var(--font-sans); font-weight: 700; color: var(--ink); margin-bottom: 12px; }
.lead-section-head .lead-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--ink-400); flex: none; }
.lead-section-head--nouveau .lead-dot { background: var(--teal); }
.lead-section-head--contacté .lead-dot { background: var(--amber); }
.lead-section-head--converti .lead-dot { background: var(--green); }
.lead-section-head--archivé .lead-dot { background: var(--ink-400); }
.lead-section-n { font-size: .78rem; font-weight: 700; color: var(--ink-500); background: var(--cream-2); border-radius: 20px; padding: 1px 9px; }
.lead-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 14px; }
.lead-card { display: flex; flex-direction: column; gap: 10px; background: var(--paper); border: 1px solid var(--line); border-radius: 14px; padding: 16px 17px; box-shadow: var(--shadow-sm); }
.lead-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.lead-who { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.lead-name { font-weight: 700; color: var(--ink); }
.lead-company { font-size: .84rem; color: var(--ink-500); }
.lead-date { flex: none; font-size: .78rem; color: var(--ink-400); white-space: nowrap; }
.lead-email { align-self: flex-start; max-width: 100%; font-size: .88rem; font-weight: 600; color: var(--teal-dark); word-break: break-all; }
.lead-email:hover { text-decoration: underline; }
.lead-message { background: var(--cream); border: 1px solid var(--line); border-radius: 10px; padding: 11px 13px; font-size: .9rem; line-height: 1.55; color: var(--ink-700); white-space: pre-wrap; word-break: break-word; max-height: 220px; overflow-y: auto; }
.lead-card-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-top: 2px; }
.lead-status-form { display: flex; align-items: center; gap: 8px; }
.lead-status-lbl { display: inline-flex; align-items: center; gap: 6px; font-size: .78rem; color: var(--ink-500); font-weight: 600; }
.lead-status-select { font: 500 .85rem var(--font-sans); color: var(--ink); background: var(--paper); border: 1px solid var(--line-2); border-radius: 9px; padding: 6px 9px; cursor: pointer; }
@media (max-width: 720px) { .lead-grid { grid-template-columns: 1fr; } }

.banner-note { background: var(--paper); border: 1px solid var(--line); border-radius: 12px; padding: 14px 18px; display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.banner-note span:not(.btn) { color: var(--ink-700); }

.review {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 20px; margin-bottom: 16px; box-shadow: var(--shadow-sm);
}
.review .top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.review .who { font-weight: 700; }
.review .src { color: var(--ink-400); font-size: .88rem; }
.review .lang { margin-left: auto; border: 1px solid var(--line-2); border-radius: 6px; padding: 1px 7px; font-size: .72rem; color: var(--ink-500); font-weight: 700; }
.review .stars { font-size: .95rem; }
.review .body { font-family: var(--font-serif); color: var(--ink); background: var(--cream); border-radius: 10px; padding: 12px 14px; margin: 12px 0; }
.review .reply-label { color: var(--teal-dark); font-weight: 700; font-size: .8rem; display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.review textarea { width: 100%; min-height: 92px; border: 1px solid var(--line-2); border-radius: 10px; padding: 12px 14px; font-family: var(--font-serif); font-size: 1rem; color: var(--ink); background: var(--paper); resize: vertical; }
.review .acts { display: flex; align-items: center; gap: 8px; margin-top: 12px; }
.review .acts .cost { margin-left: auto; color: var(--ink-400); font-size: .82rem; }

.table { width: 100%; border-collapse: collapse; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.table th { text-align: left; font-size: .76rem; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-700); font-weight: 800; padding: 13px 16px; border-bottom: 2px solid var(--teal); background: var(--teal-soft); }
.table td { padding: 14px 16px; border-bottom: 1px solid var(--line); font-size: .94rem; vertical-align: middle; }
.table tr:last-child td { border-bottom: 0; }
.table .strong { font-weight: 700; }
.table .sub { color: var(--ink-400); font-size: .82rem; }

/* Vue Avis admin : commentaire + réponse d'Igor sous chaque ligne */
.table-avis .avis-main td { border-bottom: 0; padding-bottom: 6px; }
.table-avis .avis-detail td { padding-top: 0; padding-bottom: 18px; }
.ad-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.ad-col { background: var(--cream); border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; }
.ad-label { font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--ink-400); margin-bottom: 6px; }
.ad-igor { color: var(--teal-dark); }
.ad-review { font-family: var(--font-serif); font-size: .9rem; color: var(--ink-700); line-height: 1.5; }
.ad-reply { font-family: var(--font-serif); font-size: .9rem; color: var(--ink-700); line-height: 1.55; }
.ad-col:last-child { background: var(--teal-soft); border-color: #cfe8e4; }
@media (max-width: 720px) { .ad-grid { grid-template-columns: 1fr; } }
.state-ok { color: var(--green-text); font-weight: 700; }
.state-off { color: var(--terra); font-weight: 700; }
.state-muted { color: var(--ink-500); font-weight: 700; } /* ex. facture « Remboursée » : neutre, ni vert ni rouge */
.badge-pill { display: inline-block; border-radius: 20px; padding: 2px 10px; font-size: .78rem; font-weight: 700; }
.b-nouveau { background: var(--teal-soft); color: var(--teal-dark); }
.b-contacté { background: #fef3e0; color: #a5711a; }
.b-converti { background: #e7f6ee; color: var(--green-dark); }
.b-archivé { background: var(--cream-2); color: var(--ink-500); }
.b-active { background: #e7f6ee; color: var(--green-dark); }
.b-suspended { background: #fdece6; color: #a8442a; }
.b-ok { background: #e7f6ee; color: var(--green-dark); }
.b-warn { background: #fef3e0; color: #a5711a; }
.b-mute { background: var(--cream-2); color: var(--ink-500); }
.stars-mini { color: var(--teal); font-size: .82rem; letter-spacing: 1px; white-space: nowrap; }

.cards-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 22px; }
.mini { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 15px; box-shadow: var(--shadow-sm); }
.mini .k { color: var(--ink-500); font-size: .76rem; font-weight: 600; }
.mini .v { font-family: var(--font-display); font-size: 1.5rem; font-weight: 800; margin: 3px 0; line-height: 1.1; }
.mini .d { color: var(--ink-400); font-size: .78rem; }
.mini .v.teal { color: var(--teal-dark); }
.stat-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(128px,1fr)); gap: 10px; margin-bottom: 18px; }

/* --------------------------- Réglages / forms --------------------------- */
.panel { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; margin-bottom: 18px; box-shadow: var(--shadow-sm); }
.subscription-welcome, .onboarding-intro { display: flex; align-items: center; justify-content: space-between; gap: 25px; padding: 26px 30px; background: var(--teal-soft); border: 1px solid #c4e6e0; border-radius: var(--radius); margin-bottom: 22px; }
.subscription-welcome h2, .onboarding-intro h2 { margin: 8px 0; }
.subscription-welcome p, .onboarding-intro p { max-width: 58ch; color: var(--ink-700); }
.plan-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; }
.plan-card { position: relative; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; box-shadow: var(--shadow-sm); }
.plan-card.featured { border: 2px solid var(--teal); }
.plan-card h3 { margin-bottom: 12px; }.plan-card p { min-height: 48px; color: var(--ink-500); font-size: .91rem; }.plan-price { font: 800 2rem var(--font-display); }.plan-price small { font: 500 .9rem var(--font-sans); color: var(--ink-500); }.plan-badge { position: absolute; right: 13px; top: -12px; padding: 4px 9px; border-radius: 20px; background: var(--teal); color: #fff; font-size: .72rem; font-weight: 700; }
.onboarding-intro { margin-bottom: 18px; }.training-steps { display: grid; gap: 12px; }.training-step { display: flex; gap: 18px; padding: 20px; background: var(--paper); border: 1px solid var(--line); border-left: 5px solid var(--teal); border-radius: 12px; }.training-step > span { display: grid; place-items: center; flex: 0 0 32px; height: 32px; background: var(--ink); color: #fff; border-radius: 9px; font-weight: 800; }.training-step h3 { margin-bottom: 5px; }.training-step p { color: var(--ink-500); margin-bottom: 7px; }.training-step a { color: var(--teal-dark); font-weight: 700; font-size: .9rem; }.training-finish { margin-top: 18px; display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 20px; border-radius: 12px; background: var(--ink-card); color: #fff; }.training-finish span { display: block; color: #cfd8de; font-size: .88rem; margin-top: 3px; }
.test-notice { padding: 12px 15px; border-radius: 10px; color: var(--teal-dark); background: var(--teal-soft); border: 1px solid #c4e6e0; margin-bottom: 18px; font-weight: 600; }.test-grid { display: grid; grid-template-columns: 280px 1fr; gap: 18px; align-items: start; }.test-controls { position: sticky; top: 20px; }.test-results { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }.test-results-head { display: flex; justify-content: space-between; padding: 15px 18px; background: var(--cream-2); border-bottom: 1px solid var(--line); }.test-results-head span { color: var(--teal-dark); font-size: .83rem; font-weight: 600; }.test-review { padding: 15px 18px; border-bottom: 1px solid var(--line); }.test-review:last-child { border-bottom: 0; }.test-review-meta { display: flex; gap: 8px; color: var(--ink-500); font-size: .83rem; }.test-review p { margin: 7px 0; font-family: var(--font-serif); }.test-reply { padding: 9px 11px; border-radius: 8px; background: var(--teal-soft); color: var(--ink-700); font-size: .9rem; }
.referral-card { max-width: 580px; }.referral-code { margin: 10px 0; font: 800 2.2rem var(--font-display); letter-spacing: .1em; color: var(--teal-dark); }.account-form { max-width: 520px; }
.referral-stats { display: flex; flex-wrap: wrap; gap: 14px 30px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); }
.referral-stats .rs { display: flex; flex-direction: column; line-height: 1.2; }
.referral-stats .rs b { font-family: var(--font-display); font-size: 1.5rem; font-weight: 800; color: var(--ink); }
.referral-stats .rs span { font-size: .8rem; color: var(--ink-400); }
.referral-input-panel { max-width: 640px; }
.panel h3 { margin-bottom: 4px; }
.panel .sub { color: var(--ink-500); font-size: .9rem; margin-bottom: 16px; }
.toggle-row { display: flex; align-items: center; justify-content: space-between; padding: 12px 0; border-top: 1px solid var(--line); }
.switch { position: relative; width: 44px; height: 26px; }
.switch input { opacity: 0; width: 0; height: 0; }
.switch .track { position: absolute; inset: 0; background: var(--line-2); border-radius: 20px; transition: .2s; }
.switch .track::before { content: ""; position: absolute; width: 20px; height: 20px; left: 3px; top: 3px; background: #fff; border-radius: 50%; transition: .2s; }
.switch input:checked + .track { background: var(--teal); }
.switch input:checked + .track::before { transform: translateX(18px); }

/* ------------------- Newsletter : composer + aperçu --------------------- */
.nl-compose {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 22px;
  align-items: start;
}
.nl-form { min-width: 0; }
.nl-preview { min-width: 0; }
.nl-preview-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.nl-mail-frame {
  background: var(--cream-2, #f3efe8);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 10px;
  height: 520px;
  overflow: hidden;
}
.nl-mail-frame iframe {
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: 8px;
  background: #fff;
  display: block;
}
@media (max-width: 900px) {
  .nl-compose { grid-template-columns: 1fr; }
  .nl-mail-frame { height: 460px; }
}
/* Éditeur de texte basique (WYSIWYG) de la newsletter */
.nl-toolbar { display: flex; flex-wrap: wrap; gap: 4px; border: 1px solid var(--line-2); border-bottom: 0; border-radius: 10px 10px 0 0; padding: 6px; background: var(--cream); }
.nl-tool { border: 1px solid transparent; background: none; border-radius: 7px; padding: 6px 9px; font-size: .86rem; font-weight: 600; color: var(--ink-700); cursor: pointer; min-width: 30px; line-height: 1; }
.nl-tool:hover { background: var(--paper); border-color: var(--line); color: var(--ink); }
.nl-editor { min-height: 200px; max-height: 340px; overflow: auto; border: 1px solid var(--line-2); border-radius: 0 0 10px 10px; padding: 14px; background: var(--paper); font-family: var(--font-serif); font-size: 1rem; color: var(--ink); line-height: 1.6; outline: none; }
.nl-editor:focus { border-color: var(--teal); }
.nl-editor:empty::before { content: attr(data-placeholder); color: var(--ink-400); font-style: italic; pointer-events: none; }
.nl-editor a { color: var(--teal-dark); text-decoration: underline; }
.nl-editor h2 { font-size: 1.2rem; margin: 10px 0 6px; }
.nl-editor p { margin: 0 0 10px; }
.nl-editor ul { margin: 0 0 10px 20px; }

/* ---------------------------- Page contact ------------------------------ */
.contact-page .ct-head { max-width: 720px; }
.ct-grid { display: grid; grid-template-columns: 320px 1fr; gap: 30px; align-items: start; }
@media (max-width: 880px) { .ct-grid { grid-template-columns: 1fr; } }

.ct-guide { position: sticky; top: 90px; background: var(--paper); border: 1px solid var(--line); border-radius: 18px; padding: 22px; box-shadow: 0 10px 34px rgba(22,32,43,.06); }
@media (max-width: 880px) { .ct-guide { position: static; } }
.igor-stage { position: relative; height: 100px; }
.igor-pose { position: absolute; inset: 0; display: flex; justify-content: center; align-items: center; opacity: 0; transform: translateY(6px) scale(.9); transition: opacity .3s, transform .3s; pointer-events: none; }
.igor-pose.active { opacity: 1; transform: none; animation: igor-bob 3.6s ease-in-out .3s infinite; }
@keyframes igor-bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@media (prefers-reduced-motion: reduce) { .igor-pose.active { animation: none; } }
.igor-bubble { position: relative; background: var(--teal-soft); color: var(--ink); border: 1px solid #cfe8e4; border-radius: 14px; padding: 13px 15px; font-size: .92rem; line-height: 1.5; margin-top: 16px; }
.igor-bubble::before { content: ""; position: absolute; top: -8px; left: 46px; transform: rotate(45deg); width: 14px; height: 14px; background: var(--teal-soft); border-left: 1px solid #cfe8e4; border-top: 1px solid #cfe8e4; }
.igor-bubble.pop { animation: bubble-pop .3s ease; }
@keyframes bubble-pop { 0% { transform: scale(.97); opacity: .35; } 100% { transform: scale(1); opacity: 1; } }
.guide-steps { list-style: none; margin: 18px 0 0; padding: 0; }
.guide-steps .gs { display: flex; align-items: center; gap: 10px; font-size: .88rem; color: var(--ink-400); padding: 6px 0; font-weight: 600; }
.guide-steps .gs span { width: 22px; height: 22px; border-radius: 50%; background: var(--cream-2,#f3efe8); color: var(--ink-400); display: grid; place-items: center; font-size: .76rem; font-weight: 800; border: 1px solid var(--line); transition: all .2s; }
.guide-steps .gs.active { color: var(--ink); }
.guide-steps .gs.active span { background: var(--teal); color: #fff; border-color: var(--teal); }
.guide-note { margin-top: 16px; font-size: .82rem; color: var(--ink-500); line-height: 1.55; border-top: 1px dashed var(--line-2,#d9d3c8); padding-top: 14px; }

.ct-form { background: var(--paper); border: 1px solid var(--line); border-radius: 18px; padding: 26px; box-shadow: 0 10px 34px rgba(22,32,43,.06); }
.cf-q { font-family: var(--font-display); font-size: 1.25rem; font-weight: 800; letter-spacing: -.02em; margin: 0 0 14px; }
.subject-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 520px) { .subject-grid { grid-template-columns: 1fr; } }
.subj { text-align: left; display: grid; grid-template-columns: auto 1fr; column-gap: 12px; align-items: center; background: var(--cream); border: 1.5px solid var(--line); border-radius: 13px; padding: 12px 14px; cursor: pointer; transition: border-color .15s, background .15s, transform .05s, box-shadow .15s; }
.subj:hover { border-color: var(--line-2,#d9d3c8); background: #fff; }
.subj .si { grid-row: 1 / 3; font-size: 1.45rem; }
.subj .st { font-weight: 700; color: var(--ink); font-size: .95rem; }
.subj .ss { font-size: .79rem; color: var(--ink-500); }
.subj.sel { border-color: var(--teal); background: var(--teal-soft); box-shadow: 0 0 0 3px rgba(31,157,144,.14); }
.subj:active { transform: translateY(1px); }

.cf-rest { display: none; margin-top: 22px; border-top: 1px solid var(--line); padding-top: 20px; }
.cf-rest.show { display: block; animation: cf-reveal .35s ease; }
@keyframes cf-reveal { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.cf-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 520px) { .cf-row2 { grid-template-columns: 1fr; } }
.cf-adaptive { display: none; }
.cf-adaptive.show { display: block; animation: cf-reveal .3s ease; }
.ct-form .form-group { margin-bottom: 14px; }
.ct-form label { display: block; font-weight: 600; font-size: .82rem; margin: 0 0 6px; color: var(--ink-700); }
.ct-form input, .ct-form select, .ct-form textarea { width: 100%; border: 1.5px solid #d9d3c8; border-radius: 11px; padding: 12px 13px; font: inherit; background: var(--paper); color: var(--ink); transition: border-color .15s, box-shadow .15s; }
.ct-form input:focus, .ct-form select:focus, .ct-form textarea:focus { outline: 0; border-color: var(--teal); box-shadow: 0 0 0 3px rgba(31,157,144,.15); }
.ct-form textarea { resize: vertical; min-height: 120px; }
.cf-reassure { text-align: center; font-size: .8rem; color: var(--ink-400); margin: 12px 0 0; }

/* -------------------- Double authentification (2FA) --------------------- */
.verify-form { margin-top: 8px; }
.code-input {
  width: 100%; text-align: center; font-family: var(--font-mono, monospace);
  font-size: 1.9rem; font-weight: 700; letter-spacing: .5em; padding: 14px 12px 14px 22px;
  border: 1.5px solid var(--line-2, #d9d3c8); border-radius: 12px; background: var(--paper); color: var(--ink);
  transition: border-color .15s, box-shadow .15s;
}
.code-input:focus { outline: 0; border-color: var(--teal); box-shadow: 0 0 0 3px rgba(31,157,144,.16); }
.verify-foot { display: flex; flex-direction: column; align-items: center; gap: 6px; margin-top: 16px; text-align: center; }

/* Section sécurité (Mon compte) */
.sec-panel .sec-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; margin-bottom: 16px; }
.sec-panel .sec-head h3 { margin: 0 0 4px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sec-panel .sub { margin: 0; }
.sec-state { flex: none; font-weight: 700; font-size: .86rem; white-space: nowrap; }
.sec-state.on { color: var(--green-dark, #276845); }
.sec-state.off { color: var(--ink-400); }
.sec-method { display: flex; align-items: center; gap: 14px; padding: 14px; border: 1px solid var(--line); border-radius: 12px; margin-top: 10px; }
.sec-method + .sec-method { margin-top: 8px; }
.sec-method.disabled { opacity: .62; }
.sec-method-icon { font-size: 1.5rem; flex: none; }
.sec-method-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.sec-method-txt strong { color: var(--ink); }
.sec-method-txt .sub { font-size: .84rem; }
.sec-rate { display: inline-flex; align-items: center; gap: 3px; margin-left: 6px; vertical-align: middle; white-space: nowrap; }
.sec-rate i { width: 7px; height: 7px; border-radius: 50%; background: var(--line-2); display: inline-block; }
.sec-rate i.on { background: var(--teal); }
.sec-rate b { margin-left: 3px; font-size: .7rem; font-weight: 700; color: var(--ink-500); letter-spacing: .02em; }

/* Bandeau « sécurisez votre compte » (back-office, tant que la 2FA est off) */
.sec-banner { display: flex; align-items: center; gap: 14px; padding: 12px 16px; margin-bottom: 16px; border: 1px solid #e7c98f; border-left: 4px solid var(--amber, #f5a623); border-radius: 12px; background: #fdf6e8; }
.sec-banner-ico { font-size: 1.3rem; flex: none; }
.sec-banner-txt { flex: 1; min-width: 0; font-size: .92rem; color: var(--ink-700); }
.sec-banner-txt strong { color: var(--ink); }
.sec-banner-cta { flex: none; background: var(--ink-card, #16202b); color: #fff; border: 1px solid var(--ink-card, #16202b); }
.sec-banner-cta:hover { background: #0f1720; }
.sec-banner-x { flex: none; background: none; border: 0; color: var(--ink-400); font-size: 1.05rem; line-height: 1; cursor: pointer; padding: 4px; }
.sec-banner-x:hover { color: var(--ink); }
@media (max-width: 640px) { .sec-banner { flex-wrap: wrap; } .sec-banner-txt { flex: 1 1 100%; order: 2; } }

/* Configuration de l'application d'authentification (TOTP) */
.totp-setup { margin-top: 10px; padding: 18px; border: 1px solid var(--teal); border-radius: 12px; background: var(--teal-soft); }
.totp-steps { list-style: none; margin: 0 0 14px; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: .9rem; color: var(--ink-700); }
.totp-steps strong { color: var(--teal-dark); }
.totp-grid { display: grid; grid-template-columns: auto 1fr; gap: 20px; align-items: center; }
.totp-qr { flex: none; background: #fff; padding: 10px; border-radius: 12px; border: 1px solid var(--line); line-height: 0; }
.totp-qr svg { width: 168px; height: 168px; display: block; }
.totp-manual { min-width: 0; }
.totp-manual .sub { font-size: .84rem; color: var(--ink-500); }
.totp-key { display: inline-block; margin: 6px 0 14px; padding: 8px 12px; background: #fff; border: 1px solid var(--line); border-radius: 8px; font-family: var(--font-mono); font-size: 1.02rem; font-weight: 600; letter-spacing: .06em; color: var(--ink); word-break: break-all; }
.totp-confirm label { display: block; font-size: .82rem; font-weight: 600; color: var(--ink-700); margin-bottom: 5px; }
.totp-confirm input { width: 170px; max-width: 100%; padding: 10px 12px; border: 1px solid var(--line-2); border-radius: 10px; font-family: var(--font-mono); font-size: 1.3rem; letter-spacing: .35em; text-align: center; background: #fff; color: var(--ink); }
.totp-actions { display: flex; gap: 8px; margin-top: 12px; }
@media (max-width: 640px) { .totp-grid { grid-template-columns: 1fr; justify-items: center; text-align: center; } }

/* -------------------- Mon compte : onglets + comptes gérants ------------ */
.account-layout { display: grid; grid-template-columns: 240px 1fr; gap: 22px; align-items: start; }
.account-nav { display: flex; flex-direction: column; gap: 6px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 10px; box-shadow: var(--shadow-sm); position: sticky; top: 20px; }
.account-tab { display: flex; align-items: center; gap: 11px; text-align: left; padding: 11px 14px; border-radius: 10px; border: 1px solid transparent; background: none; font-weight: 600; color: var(--ink-700); font-size: .95rem; cursor: pointer; }
.account-tab:hover { background: var(--cream-2); }
.account-tab.is-active { background: var(--ink); color: #fff; }
.account-tab .at-ico { font-size: 1.05rem; }
.account-body { min-width: 0; }
.account-body .account-form { max-width: 640px; }
.account-form .form-row { display: flex; gap: 14px; }
.account-form .form-row .form-group { flex: 1; min-width: 0; }
/* Checklist « live » des règles du nouveau mot de passe. */
.pw-rules { list-style: none; margin: -4px 0 16px; padding: 12px 14px; background: var(--cream); border: 1px solid var(--line); border-radius: 12px; display: grid; gap: 7px; }
.pw-rules li { display: flex; align-items: center; gap: 9px; font-size: .85rem; color: var(--ink-500); transition: color .15s ease; }
.pw-rules .pw-check { flex: none; width: 17px; height: 17px; border-radius: 50%; border: 1.6px solid var(--line-2); background: var(--paper); position: relative; transition: background .15s ease, border-color .15s ease; }
.pw-rules .pw-check::after { content: ""; position: absolute; left: 5px; top: 2px; width: 4px; height: 8px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg) scale(0); transition: transform .15s ease; }
.pw-rules li.ok { color: var(--green-dark, #276845); font-weight: 600; }
.pw-rules li.ok .pw-check { background: var(--green, #2f7d52); border-color: var(--green, #2f7d52); }
.pw-rules li.ok .pw-check::after { transform: rotate(45deg) scale(1); }
#pw-submit[disabled] { opacity: .5; cursor: not-allowed; }
@media (max-width: 480px) { .account-form .form-row { flex-direction: column; gap: 0; } }
.account-panel { display: none; }
.account-panel.is-active { display: block; animation: cf-reveal .25s ease; }
/* Onglet Profil : fiche large + colonne de synthèse (remplit toute la page). */
.profile-grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 20px; align-items: start; max-width: 1000px; }
.profile-grid > form.panel { margin-bottom: 0; }
.form-subhead { margin: 22px 0 14px; padding-top: 18px; border-top: 1px solid var(--line); }
.form-subhead h4 { font-size: 1rem; font-family: var(--font-sans); font-weight: 700; color: var(--ink); }
.form-subhead p { font-size: .84rem; color: var(--ink-500); margin-top: 2px; }
.profile-aside { display: flex; flex-direction: column; gap: 16px; position: sticky; top: 20px; }
.info-card { margin-bottom: 0; padding: 18px 18px 16px; }
.info-card-title { font-size: .95rem; font-family: var(--font-sans); font-weight: 700; color: var(--ink); margin-bottom: 12px; }
.info-list { list-style: none; margin: 0 0 14px; padding: 0; display: flex; flex-direction: column; }
.info-list li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--line); font-size: .88rem; }
.info-list li:last-child { border-bottom: 0; }
.info-list li > span { color: var(--ink-500); }
.info-list li > strong { color: var(--ink); font-weight: 600; text-align: right; }
.info-list li > a { font-weight: 600; color: var(--teal-dark); }
.info-list li > a:hover { text-decoration: underline; }
.pill { display: inline-block; font-size: .76rem; font-weight: 700; padding: 2px 10px; border-radius: 20px; background: var(--cream-2); color: var(--ink-500); }
.pill--active, .pill--active2 { background: color-mix(in srgb, var(--green) 15%, var(--paper)); color: var(--green-dark); }
.pill--pending { background: color-mix(in srgb, var(--amber) 20%, var(--paper)); color: #8a5a04; }
.pill--past_due { background: color-mix(in srgb, var(--terra) 16%, var(--paper)); color: #a2472e; }
.pill--cancelled, .pill--off { background: var(--cream-2); color: var(--ink-500); }
.form-group input:disabled { cursor: not-allowed; }
/* Onglet « Abonnement » rendu inactif quand le compte n'est pas abonné. */
.account-tab.is-muted:not(.is-active) { color: var(--ink-400); }
.account-tab .at-flag { margin-left: auto; font-size: .62rem; text-transform: uppercase; letter-spacing: .04em; font-weight: 800; color: var(--ink-400); background: var(--cream-2); border-radius: 20px; padding: 2px 7px; }
.account-tab.is-active .at-flag { background: rgba(255,255,255,.2); color: #fff; }
.info-list--lg li { font-size: .95rem; padding: 12px 0; }
.abo-empty { text-align: center; padding: 44px 30px; }
.abo-empty-ico { font-size: 2.4rem; line-height: 1; margin-bottom: 10px; }
.abo-empty h3 { margin-bottom: 6px; }
.abo-empty .sub { max-width: 44ch; margin: 0 auto 18px; }
@media (max-width: 860px) { .profile-grid { grid-template-columns: 1fr; } .profile-aside { position: static; } }
.team-list { display: flex; flex-direction: column; gap: 8px; margin: 14px 0; }
.team-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--cream); flex-wrap: wrap; }
.team-who { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.team-invite { display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap; }
.team-invite .inp { max-width: 340px; }
@media (max-width: 760px) { .account-layout { grid-template-columns: 1fr; } .account-nav { flex-direction: row; flex-wrap: wrap; position: static; } .account-tab { flex: 1 1 auto; } }

/* ----------------- Progression de configuration (client) ---------------- */
.setup-card { display: flex; gap: 16px; align-items: flex-start; background: var(--paper); border: 1px solid var(--line); border-left: 4px solid var(--teal); border-radius: 14px; padding: 16px 18px; margin-bottom: 20px; box-shadow: var(--shadow-sm); }
.setup-card.done { border-left-color: var(--green); }
.setup-igor { flex: none; }
.setup-main { flex: 1; min-width: 0; }
.setup-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.setup-head strong { font-family: var(--font-display); font-size: 1.04rem; color: var(--ink); }
.setup-pct { font-family: var(--font-display); font-weight: 800; color: var(--teal-dark); }
.setup-bar { height: 9px; background: var(--cream-2, #f3efe8); border-radius: 6px; overflow: hidden; margin: 9px 0 0; }
.setup-bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--teal), #3fbfb0); border-radius: 6px; transition: width .6s cubic-bezier(.2,.8,.2,1); }
.setup-card.done .setup-bar i { background: linear-gradient(90deg, var(--green), #43a06a); }
.setup-sub { margin: 8px 0 0; font-size: .88rem; color: var(--ink-500); }
.setup-sub a { color: var(--teal-dark); font-weight: 600; }
.setup-steps { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 10px; }
.setup-step { font-size: .85rem; text-decoration: none; }
.setup-step.done { color: var(--green-dark, #276845); font-weight: 600; }
.setup-step.todo { color: var(--ink-500); }
.setup-step.todo:hover { color: var(--teal-dark); }

/* ------------- Tables intelligentes (recherche + tri colonnes) ---------- */
.table-tools { display: flex; align-items: center; justify-content: flex-end; gap: 10px; margin-bottom: 12px; }
.table-search { min-width: min(320px, 100%); }
th.sortable { cursor: pointer; user-select: none; white-space: nowrap; }
th.sortable:hover { color: var(--ink); }
th.sortable::after { content: "⇅"; opacity: .3; font-size: .82em; margin-left: 6px; }
th.sort-asc::after { content: "↑"; opacity: 1; color: var(--teal-dark); }
th.sort-desc::after { content: "↓"; opacity: 1; color: var(--teal-dark); }
.table-empty td { color: var(--ink-400); text-align: center; padding: 20px; }

/* ----------------------------- Pagination ------------------------------- */
.pagination { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 6px; margin-top: 18px; }
.pg-btn { display: inline-flex; align-items: center; justify-content: center; min-width: 38px; height: 38px; padding: 0 13px; border-radius: 10px; border: 1px solid var(--line-2); background: var(--paper); color: var(--ink-700); font-weight: 600; font-size: .9rem; cursor: pointer; text-decoration: none; transition: background .12s, border-color .12s, color .12s; }
.pg-btn:hover { background: var(--cream-2); border-color: var(--teal); color: var(--ink); }
.pg-cur, .pg-cur:hover { background: var(--ink); color: #fff; border-color: var(--ink); cursor: default; }
.pg-nav { font-weight: 700; }
.pg-disabled, .pg-disabled:hover { opacity: .45; pointer-events: none; background: var(--paper); border-color: var(--line); color: var(--ink-400); }
.pg-gap { padding: 0 4px; color: var(--ink-400); }
.pg-info { text-align: center; color: var(--ink-400); font-size: .82rem; margin-top: 8px; }

/* ------------------ Consultation « voir en tant que » ------------------- */
.imp-bar { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; background: linear-gradient(90deg, #9a3327, #c0493c); color: #fff; padding: 10px 18px; font-size: .9rem; position: sticky; top: 0; z-index: 1200; }
.imp-bar .imp-txt strong { font-weight: 800; }
.imp-quit { background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.4); color: #fff; border-radius: 9px; padding: 7px 14px; font-weight: 700; cursor: pointer; font-size: .85rem; }
.imp-quit:hover { background: rgba(255,255,255,.3); }
.row-actions { display: flex; gap: 6px; flex-wrap: wrap; }

/* ------------------------- Journal d'activité --------------------------- */
.log-filters { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 18px; }
.log-search { display: flex; align-items: center; gap: 8px; }
.log-search .inp { min-width: 230px; }
.th-sort { color: var(--ink-500); text-decoration: none; font-weight: 700; white-space: nowrap; }
.th-sort:hover { color: var(--ink); }
.th-sort.on { color: var(--teal-dark); }
.log-table td { vertical-align: middle; }
.log-pager { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 16px; }
.badge-pill.b-teal   { background: #e7f4f2; color: #17857b; }
.badge-pill.b-amber  { background: #fbf0d8; color: #96660f; }
.badge-pill.b-ink    { background: #e6eaef; color: #2b3a4a; }
.badge-pill.b-violet { background: #efe9fb; color: #6b4fc0; }
.badge-pill.b-red    { background: #fbe4de; color: #b2402c; }
.badge-pill.b-blue   { background: #e2eefb; color: #2f6bb0; }
.log-modal-ov { position: fixed; inset: 0; z-index: 2147481000; display: none; align-items: center; justify-content: center; padding: 20px; background: rgba(16,24,32,.55); }
.log-modal-ov.open { display: flex; animation: tour-fade .2s ease; }
.log-modal { position: relative; background: #fff; border-radius: 16px; max-width: 520px; width: 100%; padding: 26px 28px; box-shadow: 0 30px 80px rgba(0,0,0,.3); max-height: 86vh; overflow: auto; }
.log-modal h3 { font-family: var(--font-display); font-weight: 800; letter-spacing: -.02em; margin: 0 0 16px; }
.log-modal-x { position: absolute; top: 14px; right: 16px; background: none; border: 0; font-size: 1.05rem; color: var(--ink-400); cursor: pointer; }
.log-modal-x:hover { color: var(--ink); }
.log-dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 9px 18px; font-size: .92rem; }
.log-dl dt { color: var(--ink-500); font-weight: 600; }
.log-dl dd { margin: 0; color: var(--ink); word-break: break-word; }
.log-dl .dl-sep { grid-column: 1 / -1; border-top: 1px solid var(--line); margin: 6px 0 2px; }
.log-dl .dl-head { grid-column: 1 / -1; font-weight: 700; color: var(--ink-700); font-size: .82rem; text-transform: uppercase; letter-spacing: .05em; margin-top: 4px; }

/* ------------------------------- Erreur --------------------------------- */
.error-page { text-align: center; padding: 88px 20px 100px; }
.err-wrap { max-width: 640px; }

.err-code {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  line-height: 1;
  margin-bottom: 6px;
}
.err-digit {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(90px, 20vw, 150px);
  color: var(--ink);
  letter-spacing: -0.03em;
}
.err-zero {
  display: inline-flex;
  width: clamp(96px, 21vw, 158px);
  height: clamp(96px, 21vw, 158px);
  align-items: center;
  justify-content: center;
  animation: err-bob 3.4s ease-in-out infinite;
}
.err-zero svg { width: 100%; height: 100%; overflow: visible; }
@keyframes err-bob {
  0%, 100% { transform: translateY(0) rotate(-2deg); }
  50%      { transform: translateY(-8px) rotate(2deg); }
}
@media (prefers-reduced-motion: reduce) { .err-zero { animation: none; } }

.err-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.5rem, 4vw, 2.1rem);
  color: var(--ink);
  margin: 4px 0 8px;
}
.err-msg {
  color: var(--ink-500);
  font-size: 1.05rem;
  max-width: 460px;
  margin: 0 auto 26px;
}
.err-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}

/* ------------------------------ Utilitaires ----------------------------- */
.center { text-align: center; }
.mt-0{margin-top:0}.mt-1{margin-top:8px}.mt-2{margin-top:16px}.mt-3{margin-top:24px}.mt-4{margin-top:32px}
.mb-2{margin-bottom:16px}
.hidden { display: none !important; }
.flex { display: flex; align-items: center; gap: 10px; }
.between { justify-content: space-between; }
.wrap-narrow { max-width: 760px; }

/* --------------- Connecteurs plateformes (fiche établissement) ----------- */
.conn-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.conn-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px 4px 5px; border-radius: 999px; border: 1px solid var(--line); background: var(--paper); font-size: .82rem; font-weight: 600; color: var(--ink-700); line-height: 1; text-decoration: none; }
.conn-chip .conn-logo { display: inline-flex; }
.conn-chip .conn-logo svg { width: 18px; height: 18px; display: block; }
.conn-chip .conn-name { white-space: nowrap; }
.conn-chip.is-connect { border-color: var(--c); cursor: pointer; transition: background .15s, box-shadow .15s; }
.conn-chip.is-connect:hover { background: var(--cream-2); box-shadow: var(--shadow-sm); }
.conn-chip.is-on { border-color: var(--c); background: var(--cream); }
.conn-chip.is-on .conn-ok { color: var(--green-text); font-weight: 700; }
.conn-chip.is-soon { color: var(--ink-400); background: var(--cream); border-style: dashed; }
.conn-chip.is-soon .conn-logo svg { filter: grayscale(1); opacity: .5; }
.conn-chip.is-soon .conn-soon { font-size: .66rem; font-weight: 700; color: var(--ink-400); text-transform: uppercase; letter-spacing: .03em; }

/* --------------------------- Offre de lancement ------------------------- */
.offer-banner { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:8px 18px; background:linear-gradient(90deg,var(--teal),var(--teal-dark)); color:#fff; padding:13px 22px; border-radius:14px; box-shadow:var(--shadow-sm); text-align:center; }
.offer-banner .offer-tag { font-weight:800; letter-spacing:.02em; }
.offer-banner .offer-text { color:#e9fffb; font-size:.98rem; }
.offer-banner .offer-text strong { color:#fff; font-size:1.15em; font-weight:800; }
.offer-banner .offer-cta { background:#fff; color:var(--teal-dark); font-weight:800; padding:8px 17px; border-radius:999px; text-decoration:none; white-space:nowrap; transition:transform .12s, box-shadow .12s; }
.offer-banner .offer-cta:hover { transform:translateY(-1px); box-shadow:0 4px 14px rgba(0,0,0,.18); }
.offer-badge { display:inline-block; background:var(--amber); color:#3a2600; font-weight:800; font-size:.72rem; padding:3px 9px; border-radius:999px; vertical-align:middle; }
.offer-firstmonth { color:var(--teal-dark); font-weight:700; font-size:.9rem; }
/* Bloc « 1er mois remisé » dans le récap du configurateur (panneau sombre) */
.sum-offer { display:block; margin-top:12px; padding:10px 14px; background:linear-gradient(90deg,rgba(31,157,144,.28),rgba(31,157,144,.12)); border:1px solid rgba(111,211,199,.45); border-radius:12px; }
.sum-offer[hidden] { display:none; }
.sum-offer-tag { display:block; font-size:.7rem; font-weight:800; letter-spacing:.04em; text-transform:uppercase; color:#6fd3c7; margin-bottom:2px; }
.sum-offer-price { display:block; font-size:1.35rem; font-weight:800; color:#fff; line-height:1.15; }
.sum-offer-price s { color:#8fa1ab; font-weight:600; font-size:.72em; margin-right:7px; }
.sum-offer-price strong { color:#fff; }
.sum-offer-then { display:block; font-size:.78rem; color:#aeb9c3; margin-top:1px; }
/* Ligne « 1er mois remisé » sur les cartes de formule (fond clair, espace client) */
.plan-firstmonth { display:inline-block; margin:2px 0 8px; padding:5px 12px; background:var(--teal-soft); border:1px solid #cfe8e4; border-radius:999px; font-size:.86rem; color:var(--teal-dark); font-weight:700; }
.plan-firstmonth s { color:var(--ink-400); font-weight:600; margin-right:5px; }
.plan-firstmonth strong { color:var(--teal-dark); font-size:1.08em; }

/* ------------------------------ Responsive ------------------------------ */
@media (max-width: 900px) {
  .hero-grid, .pricing-grid { grid-template-columns: 1fr; }
  .steps, .stat-row, .quotes { grid-template-columns: 1fr; }
  .how-steps { grid-template-columns: 1fr; }
  .how-steps .steps-left { grid-template-columns: 1fr; grid-template-rows: none; }
  .cards-3, .plan-cards { grid-template-columns: 1fr; }
  .nav-links { display: none; }
  .nav-toggle { display: block; }
  /* Menu burger : carte flottante arrondie, fidèle au design du site. */
  .nav-links.open {
    display: flex; flex-direction: column; align-items: stretch; gap: 2px;
    position: absolute; top: calc(100% + 8px); left: 12px; right: 12px;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 18px;
    padding: 10px;
    box-shadow: 0 14px 38px rgba(22,32,43,.15), 0 2px 6px rgba(22,32,43,.06);
    max-height: calc(100vh - 96px); overflow-y: auto;
    transform-origin: top right;
    animation: navMenuIn .19s cubic-bezier(.2,.7,.3,1) both;
  }
  .nav-links.open a {
    display: flex; align-items: center; justify-content: space-between;
    padding: 12px 14px; border-radius: 12px;
    font-size: 1rem; font-weight: 600; color: var(--ink-700);
    transition: background .14s, color .14s;
  }
  .nav-links.open a::after { content: "\203A"; color: var(--ink-400); font-size: 1.15rem; font-weight: 700; line-height: 1; }
  .nav-links.open a:hover, .nav-links.open a.active { background: var(--teal-soft); color: var(--teal-dark); }
  .nav-links.open a.active::after { color: var(--teal); }
  /* En-tête mobile : on évite le débordement horizontal en dégageant la barre.
     FR/EN + Connexion passent dans le menu burger ; on garde logo + CTA + burger. */
  .wrap { padding-inline: 16px; }
  .nav { gap: 10px; }
  .nav-right { gap: 8px; }
  .nav-links-inline { display: none; }
  .site-header .lang-switch { display: none; } /* spécificité renforcée : bat le bloc <style> inline du <head> */
  .btn-dark.btn-sm { padding: 8px 12px; font-size: .85rem; }
  /* Bloc utilitaire du menu (Connexion + langue), séparé du reste par un filet. */
  .nav-links.open .nav-m-foot { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; padding-top: 12px; border-top: 1px solid var(--line); }
  .nav-links.open .nav-m-login { color: var(--ink-700); }
  /* Sélecteur de langue en pastille segmentée. */
  .nav-links.open .nav-m-lang { display: flex; gap: 4px; margin-top: 2px; padding: 4px; background: var(--cream-2); border: 1px solid var(--line); border-radius: 12px; }
  .nav-links.open .nav-m-lang a { flex: 1; justify-content: center; padding: 9px 10px; border-radius: 9px; font-weight: 700; font-size: .9rem; color: var(--ink-500); }
  .nav-links.open .nav-m-lang a::after { content: none; }
  .nav-links.open .nav-m-lang a.is-active { background: var(--ink); color: #fff; }
  .nav-links.open .nav-m-lang a:not(.is-active):hover { background: var(--paper); color: var(--ink-700); }
  .back { grid-template-columns: 1fr; }
  .back > .side, body.impersonating .side { position: static; height: auto; overflow: visible; flex-direction: row; flex-wrap: wrap; border-right: 0; border-bottom: 1px solid var(--line); align-items: center; }
  .side .brand { margin-bottom: 8px; }
  .side .grp { display: none; }
  .side nav { display: flex; flex-wrap: wrap; gap: 4px; }
  /* Mobile : catégories toujours dépliées, affichées en ligne (pas de séparateurs
     ni de barres d'accent verticales, qui n'ont de sens qu'en colonne). */
  .nav-group { margin: 0; padding-top: 0; border-top: 0; display: contents; }
  .nav-group + .nav-group, .nav-solo + .nav-group { margin-top: 0; padding-top: 0; border-top: 0; }
  .nav-group-head { display: none; }
  .side nav a { padding: 8px 11px; }
  .side nav a.active::before { display: none; }
  .nav-group-items, .nav-group.is-open > .nav-group-items { max-height: none; opacity: 1; overflow: visible; display: flex; flex-wrap: wrap; gap: 4px; }
  .side .foot { display: none; }
  .main { padding: 20px; }
  .summary { position: static; }
  .agency-band, .cta-final, .subscription-welcome, .onboarding-intro, .training-finish { flex-direction: column; align-items: flex-start; }
  .agency-band .price { text-align: left; }
  .test-grid { grid-template-columns: 1fr; }.test-controls { position: static; }
  .enterprise-quote { grid-template-columns: 1fr; gap: 12px; }.enterprise-quote .enterprise-igor { display: none; }
}

@keyframes navMenuIn { from { opacity: 0; transform: translateY(-8px) scale(.98); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* =========================================================================
   Parcours de formation (back office)
   ========================================================================= */
.igor-help { display:flex; align-items:center; gap:14px; background:var(--teal-soft); border:1px solid #cfe8e4; border-radius:14px; padding:12px 16px; margin-bottom:18px; }
.igor-help svg { flex:none; }
.igor-help-txt { flex:1; color:var(--ink-700); font-size:.94rem; }
.igor-help-txt strong { color:var(--teal-dark); }

.training-progress { background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); padding:20px 22px; box-shadow:var(--shadow-sm); margin-bottom:26px; }
.tp-head { display:flex; align-items:baseline; justify-content:space-between; margin-bottom:10px; }
.tp-head strong { font-family:var(--font-display); font-size:1.05rem; }
.tp-pct { font-family:var(--font-display); font-weight:800; color:var(--teal-dark); font-size:1.2rem; }
.tp-track { height:12px; border-radius:20px; background:var(--cream-2); overflow:hidden; }
.tp-fill { height:100%; border-radius:20px; background:linear-gradient(90deg,var(--teal),var(--teal-dark)); transition:width .4s ease; }

.training-cat { margin-bottom:26px; }
.cat-title { font-size:1.3rem; margin-bottom:14px; }
.module-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(340px,1fr)); gap:16px; }
.module-card { display:flex; gap:14px; align-items:flex-start; background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); padding:18px; box-shadow:var(--shadow-sm); }
.module-card.mc-done { border-color:#cfe8e4; }
.module-card.mc-locked, .module-card.mc-plan { opacity:.72; background:var(--cream-2); }
.mc-igor { flex:none; width:46px; }
.mc-body { flex:1; min-width:0; }
.mc-top { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.mc-top h3 { font-size:1.05rem; }
.mc-body p { color:var(--ink-500); font-size:.92rem; margin:6px 0 8px; }
.mc-meta { color:var(--ink-400); font-size:.8rem; display:flex; gap:6px; flex-wrap:wrap; }
.mc-badge { font-size:.72rem; font-weight:700; border-radius:20px; padding:2px 9px; white-space:nowrap; }
.mc-badge.b-done { background:#e7f6ee; color:var(--green-dark); }
.mc-badge.b-todo { background:var(--teal-soft); color:var(--teal-dark); }
.mc-badge.b-locked, .mc-badge.b-plan { background:#eee7db; color:#8a7a5c; }
.mc-action { flex:none; align-self:center; text-align:right; }

.module-player { background:var(--paper); border:1px solid var(--line); border-radius:var(--radius-lg); padding:14px 26px 22px; box-shadow:var(--shadow); max-width:960px; }
.mp-track { height:8px; border-radius:20px; background:var(--cream-2); overflow:hidden; margin:6px 0 26px; }
.mp-track-fill { height:100%; width:0; border-radius:20px; background:linear-gradient(90deg,var(--teal),var(--teal-dark)); transition:width .35s ease; }

/* Étape : la zone encadrée (à gauche) + l'explication (à droite). */
.mp-step { display:grid; grid-template-columns:1.02fr 1fr; gap:30px 42px; align-items:center; min-height:300px; }
.mp-framewrap { position:relative; padding:28px 20px 6px 6px; }
.mp-frame { position:relative; border:2px solid var(--teal); border-radius:16px; background:var(--cream); padding:18px; box-shadow:0 12px 30px rgba(31,157,144,.13); }
/* Tête d'Igor, petite et conviviale, tangente au coin extérieur de l'encadré. */
.mp-frame-igor { position:absolute; top:-24px; right:-18px; width:58px; height:58px; border-radius:50%; background:#fff; border:2px solid var(--teal); display:grid; place-items:center; box-shadow:var(--shadow-sm); z-index:3; }
.mp-frame-igor svg { animation:igor-bob 3.6s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .mp-frame-igor svg { animation:none; } }
.mp-explain { min-width:0; }
.mp-explain .mp-stepnum { color:var(--teal-dark); font-weight:700; font-size:.82rem; margin-bottom:8px; }
.mp-explain h2 { font-size:1.5rem; margin-bottom:12px; }
.mp-explain p { font-family:var(--font-serif); color:var(--ink-700); font-size:1.12rem; max-width:50ch; }
.mp-nav { display:flex; align-items:center; gap:12px; margin-top:20px; padding-top:18px; border-top:1px solid var(--line); }
.mp-nav #mp-next { margin-left:auto; }
.mp-nav #mp-finish { margin-left:auto; }

/* Mini-mockups des zones encadrées (contenu de confiance, non éditable). */
.mpz { font-size:.86rem; }
.mpz-label { font-size:.66rem; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-400); font-weight:800; margin-bottom:9px; }
.mpz-list { display:flex; flex-direction:column; gap:6px; }
.mpz-nav-item { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:8px 11px; border-radius:9px; background:var(--paper); border:1px solid var(--line); font-weight:600; color:var(--ink-700); font-size:.85rem; }
.mpz-nav-item.on { background:var(--ink); color:#fff; border-color:var(--ink); }
.mpz-badge { background:var(--teal); color:#fff; border-radius:20px; font-size:.7rem; padding:1px 8px; font-weight:700; }
.mpz-nav-item.on .mpz-badge { background:rgba(255,255,255,.25); }
.mpz-card { background:var(--paper); border:1px solid var(--line); border-radius:11px; padding:12px 13px; }
.mpz-top { display:flex; align-items:center; gap:8px; margin-bottom:6px; }
.mpz-who { font-weight:700; font-size:.85rem; }
.mpz-stars { color:var(--amber); font-size:.82rem; letter-spacing:1px; margin-left:auto; white-space:nowrap; }
.mpz-text { font-family:var(--font-serif); color:var(--ink-700); font-size:.85rem; line-height:1.5; }
.mpz-reply { margin-top:8px; background:var(--teal-soft); border:1px solid #cfe8e4; border-left:3px solid var(--teal); border-radius:8px; padding:8px 10px; font-family:var(--font-serif); font-size:.82rem; color:var(--ink-700); line-height:1.45; }
.mpz-reply b { color:var(--teal-dark); font-family:var(--font-sans); }
.mpz-acts { display:flex; gap:6px; margin-top:10px; flex-wrap:wrap; }
.mpz-btn { border-radius:8px; padding:6px 11px; font-size:.76rem; font-weight:700; border:1px solid transparent; white-space:nowrap; }
.mpz-btn.g { background:var(--green); color:#fff; }
.mpz-btn.d { background:var(--ink); color:#fff; }
.mpz-btn.o { background:var(--paper); color:var(--ink-700); border-color:var(--line-2); }
.mpz-btn.hi { box-shadow:0 0 0 3px rgba(47,125,82,.25); }
.mpz-field { background:var(--paper); border:1px solid var(--line-2); border-radius:9px; padding:9px 11px; color:var(--ink-700); font-family:var(--font-serif); font-size:.84rem; }
.mpz-caret { color:var(--teal); font-weight:700; animation:blink 1.1s steps(1) infinite; }
.mpz-chips { display:flex; gap:6px; flex-wrap:wrap; }
.mpz-chip { border:1px solid var(--line-2); border-radius:20px; padding:5px 12px; font-size:.8rem; font-weight:600; color:var(--ink-700); background:var(--paper); }
.mpz-chip.on { border-color:var(--teal); background:var(--teal-soft); color:var(--teal-dark); }
.mpz-row { display:flex; align-items:center; gap:10px; }
.mpz-switch { width:40px; height:23px; border-radius:20px; background:var(--teal); position:relative; flex:none; }
.mpz-switch::after { content:""; position:absolute; width:17px; height:17px; border-radius:50%; background:#fff; top:3px; right:3px; }
.mpz-code { font-family:var(--font-mono); font-weight:800; letter-spacing:.14em; color:var(--teal-dark); font-size:1.15rem; background:var(--teal-soft); border:1px dashed var(--teal); border-radius:10px; padding:12px; text-align:center; }
.mpz-progress { height:9px; background:var(--cream-2); border-radius:6px; overflow:hidden; }
.mpz-progress i { display:block; height:100%; background:linear-gradient(90deg,var(--teal),var(--teal-dark)); border-radius:6px; }
.mpz-mini { display:flex; gap:8px; }
.mpz-plan { flex:1; border:1px solid var(--line); border-radius:10px; padding:10px 6px; text-align:center; background:var(--paper); font-size:.82rem; color:var(--ink-700); }
.mpz-plan.on { border:2px solid var(--teal); background:var(--teal-soft); }
.mpz-plan b { display:block; font-family:var(--font-display); color:var(--ink); }
.mpz-plan span { font-size:.74rem; color:var(--ink-500); }

.lock-wrap { background:var(--paper); border:1px solid var(--line); border-radius:var(--radius-lg); box-shadow:var(--shadow); padding:44px; text-align:center; max-width:640px; margin:20px auto; }
.lock-igor { display:flex; justify-content:center; margin-bottom:12px; }
.lock-wrap h1 { font-size:1.7rem; }
.lock-lead { font-family:var(--font-serif); color:var(--ink-700); font-size:1.1rem; margin:12px 0; }
.lock-actions { display:flex; gap:10px; justify-content:center; margin-top:22px; flex-wrap:wrap; }

@media (max-width:720px) {
  .module-grid { grid-template-columns:1fr; }
  .mp-step { grid-template-columns:1fr; gap:20px; }
  .mp-framewrap { order:-1; padding:26px 12px 0 4px; }
  .mp-explain p { max-width:none; }
}

/* Indicateur "Igor apprend" */
.learn-chip { display:inline-flex; align-items:center; gap:8px; background:var(--teal-soft); color:var(--teal-dark); border:1px solid #cfe8e4; border-radius:20px; padding:6px 12px; font-size:.84rem; font-weight:600; }
.learn-chip svg { flex:none; }

/* ============================ Page « Les emails d'Igor » (démo interactive) ============================ */
.btn-amber { background:#e8912a; color:#fff; }
.btn-amber:hover { background:#cf7d1c; }

.emails-head { max-width:720px; }
.emails-page .lead { color:var(--ink-700); }

/* Onglets de sélection */
.demo-tabs { display:flex; flex-wrap:wrap; gap:8px; margin:26px 0 8px; }
.demo-tab { display:inline-flex; align-items:center; gap:8px; border:1px solid var(--line); background:var(--paper); color:var(--ink-700); border-radius:11px; padding:9px 13px; font:600 .88rem var(--font-sans); cursor:pointer; transition:border-color .12s, background .12s; }
.demo-tab:hover { border-color:var(--teal); }
.demo-tab.active { background:var(--ink); border-color:var(--ink); color:#fff; }
.demo-tab .dt-n { font-weight:800; color:var(--teal); }
.demo-tab.active .dt-n { color:#75d8cc; }

/* Scène : téléphone + explication */
.demo-stage { display:grid; grid-template-columns:340px 1fr; gap:40px; align-items:center; margin-top:26px; }

/* Téléphone Gmail */
.gphone { position:relative; width:340px; max-width:100%; margin-inline:auto; background:#0d151d; border-radius:42px; padding:12px; box-shadow:0 30px 70px rgba(22,32,43,.30); }
.gphone-cam { position:absolute; top:20px; left:50%; transform:translateX(-50%); width:8px; height:8px; border-radius:50%; background:#33414d; z-index:2; }
.gphone-screen { background:#fff; border-radius:32px; overflow:hidden; }
.gm-bar { display:flex; align-items:center; justify-content:space-between; padding:16px 16px 10px; color:var(--ink-500); }
.gm-ico { font-size:1.05rem; color:var(--ink-400); }
.gm-actions-top { display:inline-flex; gap:16px; }
.gm-scroll { height:520px; overflow-y:auto; padding:4px 18px 22px; -webkit-overflow-scrolling:touch; }
.gm-scroll::-webkit-scrollbar { width:5px; } .gm-scroll::-webkit-scrollbar-thumb { background:#e0d9cd; border-radius:4px; }

.gm-mail { display:none; }
.gm-mail.active { display:block; animation:gmfade .22s ease; }
@keyframes gmfade { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:none; } }
.gm-subject { font-family:var(--font-display); font-size:1.14rem; line-height:1.25; margin:6px 0 14px; color:var(--ink); }
.gm-sender { display:flex; align-items:center; gap:11px; padding-bottom:14px; border-bottom:1px solid var(--line); }
.gm-avatar { flex:none; width:38px; height:38px; border-radius:50%; background:var(--teal); color:#fff; display:grid; place-items:center; font-weight:800; font-family:var(--font-display); }
.gm-sender-name { font-weight:700; font-size:.9rem; color:var(--ink); }
.gm-sender-mail { font-weight:400; color:var(--ink-400); font-size:.8rem; }
.gm-sender-to { font-size:.78rem; color:var(--ink-400); margin-top:1px; }
.gm-body { padding-top:14px; }
.gm-body > p { margin:0 0 12px; font-size:.9rem; line-height:1.6; color:var(--ink-700); }
.gm-review { border:1px solid var(--line); background:var(--cream); border-radius:10px; padding:10px 12px; margin:14px 0; }
.gm-stars { color:#e8a53a; letter-spacing:1px; font-size:.85rem; }
.gm-stars span { color:var(--ink-500); font-size:.78rem; letter-spacing:normal; margin-left:6px; }
.gm-review p { margin:6px 0 0; font-family:var(--font-serif); font-size:.86rem; line-height:1.5; color:var(--ink-700); }
.gm-reply { background:var(--teal-soft); border:1px solid #cfe8e4; border-left:3px solid var(--teal); border-radius:10px; padding:11px 13px; margin:14px 0; }
.gm-reply-lbl { font-size:.68rem; font-weight:800; letter-spacing:.03em; text-transform:uppercase; color:var(--teal-dark); margin-bottom:5px; }
.gm-reply p { margin:0; font-family:var(--font-serif); font-size:.86rem; line-height:1.55; color:var(--ink-700); }
.gm-actions { display:flex; flex-wrap:wrap; gap:7px; margin-top:16px; }
.gm-btn { border-radius:9px; padding:8px 13px; font-size:.82rem; font-weight:700; }
.gm-btn-green { background:var(--green); color:#fff; }
.gm-btn-dark { background:var(--ink); color:#fff; }
.gm-btn-amber { background:#e8912a; color:#fff; }
.gm-btn-ghost { background:var(--paper); color:var(--ink-700); border:1px solid var(--line-2); }
.gm-note { margin-top:13px; font-size:.76rem; color:var(--ink-400); }

/* Colonne explication */
.demo-info-col { position:relative; min-height:360px; }
.demo-info { display:none; }
.demo-info.active { display:block; animation:gmfade .22s ease; }
.di-num { font-family:var(--font-display); font-weight:800; font-size:2.4rem; color:var(--teal); line-height:1; }
.demo-info h2 { font-size:1.6rem; margin:8px 0 10px; }
.demo-info p { color:var(--ink-700); font-size:1.05rem; max-width:44ch; }
.di-hint { margin-top:16px; font-size:.85rem; color:var(--ink-400); }
.demo-cta { margin-top:30px; display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.demo-cta-note { color:var(--ink-400); font-size:.9rem; }

@media (max-width:820px){
  .demo-stage { grid-template-columns:1fr; gap:24px; }
  .demo-info-col { min-height:0; text-align:center; }
  .demo-info p { margin-inline:auto; }
  .di-hint { display:none; }
  .demo-cta { justify-content:center; }
}

/* ============================ Tableau de bord admin ============================ */
.period-bar { display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; margin-bottom:20px; }
.period-btns { display:inline-flex; gap:4px; background:var(--paper); border:1px solid var(--line); border-radius:12px; padding:4px; }
.period-btn { padding:7px 14px; border-radius:9px; font-size:.9rem; font-weight:600; color:var(--ink-700); text-decoration:none; }
.period-btn:hover { background:var(--cream-2); }
.period-btn.active { background:var(--ink); color:#fff; }
.period-custom { display:inline-flex; align-items:center; gap:8px; font-size:.86rem; color:var(--ink-500); flex-wrap:wrap; }
.period-custom label { display:inline-flex; align-items:center; gap:6px; }
.period-custom input[type=date] { border:1px solid var(--line-2); border-radius:9px; padding:7px 9px; font:inherit; background:var(--paper); color:var(--ink); }

.kpi-up { color:var(--green-dark); font-weight:700; }
.kpi-down { color:#c0442a; font-weight:700; }
.kpi-flat { color:var(--ink-400); font-weight:600; }

.chart-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.chart-grid .panel { margin-bottom:0; }
.chart-grid .chart-wide { grid-column:1 / -1; }
.chart-grid .panel h3 { margin-bottom:2px; font-size:1.02rem; }
.chart-grid .panel .sub { color:var(--ink-400); font-size:.84rem; margin:0 0 12px; }
.chart { width:100%; height:auto; display:block; max-height:320px; margin-inline:auto; }
/* Panneaux contenant un graphique : un peu plus compacts */
.panel:has(> .chart), .panel:has(> .sub + .chart), .chart-grid .panel { padding:18px; }
@media (max-width:860px){ .chart-grid { grid-template-columns:1fr; } }

/* Cibles de survol + tooltip flottant des graphiques */
.chart [data-tip] { cursor: pointer; }
.chart path[data-tip]:hover { opacity: .82; }
.chart circle[data-tip]:hover { fill: rgba(31,157,144,.16); }
.chart rect[data-tip]:hover { fill: rgba(22,32,43,.05); }
.chart-tip {
  position: fixed; z-index: 2147483000; pointer-events: none;
  background: var(--ink); color: #fff;
  font: 600 12px/1.4 var(--font-sans, Inter), Arial, sans-serif;
  padding: 7px 10px; border-radius: 8px; white-space: pre;
  box-shadow: 0 8px 24px rgba(22,32,43,.22);
  opacity: 0; transform: translateY(3px);
  transition: opacity .12s ease, transform .12s ease; max-width: 260px;
}
.chart-tip.show { opacity: 1; transform: none; }

/* Menus « période » par module de stat (natif details/summary, sans JS) */
.panel-head { display:flex; align-items:flex-start; justify-content:space-between; gap:10px; }
.panel-head .sub { margin-bottom:12px; }
.panel-period-tag { color:var(--teal-dark); font-weight:600; }
.panel-menu { position:relative; flex:none; }
.panel-menu > summary { list-style:none; cursor:pointer; width:30px; height:30px; border-radius:8px; display:grid; place-items:center; color:var(--ink-400); font-size:1.3rem; line-height:1; user-select:none; letter-spacing:1px; }
.panel-menu > summary::-webkit-details-marker { display:none; }
.panel-menu > summary::marker { content:""; }
.panel-menu > summary:hover, .panel-menu[open] > summary { background:var(--cream-2); color:var(--ink); }
.panel-menu-pop { position:absolute; right:0; top:calc(100% + 6px); z-index:40; width:214px; background:var(--paper); border:1px solid var(--line); border-radius:12px; box-shadow:var(--shadow); padding:8px; }
.pm-title { font-size:.7rem; text-transform:uppercase; letter-spacing:.04em; color:var(--ink-400); font-weight:700; padding:4px 8px 6px; }
.pm-item { display:block; padding:8px 10px; border-radius:8px; font-size:.9rem; color:var(--ink-700); font-weight:500; }
.pm-item:hover { background:var(--cream-2); }
.pm-item.on { background:var(--ink); color:#fff; font-weight:600; }
.pm-sep { height:1px; background:var(--line); margin:6px 4px; }
.pm-custom { display:flex; flex-direction:column; gap:6px; padding:4px 8px 2px; }
.pm-custom label { font-size:.78rem; color:var(--ink-500); display:flex; align-items:center; gap:6px; }
.pm-custom input[type=date] { flex:1; min-width:0; border:1px solid var(--line-2); border-radius:8px; padding:6px 8px; font:inherit; font-size:.82rem; background:var(--paper); color:var(--ink); }
.pm-custom .btn { margin-top:4px; }
/* Rechargement d'un composant : le panneau se grise + roue qui tourne. */
.panel[data-panel] { position:relative; }
.panel.is-loading { pointer-events:none; }
.panel.is-loading > *:not(.panel-loader) { opacity:.35; filter:grayscale(.4); transition:opacity .15s ease; }
.panel.is-loading::before { content:""; position:absolute; inset:0; background:rgba(255,255,255,.35); border-radius:inherit; z-index:5; }
.panel.is-loading::after { content:""; position:absolute; top:50%; left:50%; width:34px; height:34px; margin:-17px 0 0 -17px; z-index:6;
  border:3px solid var(--line-2); border-top-color:var(--teal); border-radius:50%; animation:panel-spin .7s linear infinite; }
@keyframes panel-spin { to { transform:rotate(360deg); } }
.chart-summary { display:flex; flex-wrap:wrap; gap:10px 26px; margin:0 0 14px; padding:12px 14px; background:var(--cream); border:1px solid var(--line); border-radius:12px; }
.chart-summary .cs { display:flex; flex-direction:column; line-height:1.2; }
.chart-summary .cs b { font-family:var(--font-display); font-size:1.5rem; font-weight:800; color:var(--ink); }
.chart-summary .cs span { font-size:.76rem; color:var(--ink-400); }

/* --------------------------- Fiche client admin ------------------------- */
.fiche-actions { display:flex; gap:8px; flex-wrap:wrap; }
.fiche-reviews { margin-top:14px; display:grid; gap:10px; }
.fiche-review { border:1px solid var(--line); border-radius:12px; padding:12px 14px; background:var(--cream); }
.fiche-review .fr-top { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.fiche-review .fr-top .stars { font-size:.9rem; }
.fiche-review .fr-text { margin-top:6px; font-family:var(--font-serif); font-size:.9rem; color:var(--ink-700); }
.fiche-timeline { list-style:none; margin:0; padding:0; }
.fiche-timeline li { display:flex; align-items:center; gap:12px; padding:10px 2px; border-bottom:1px solid var(--line); flex-wrap:wrap; }
.fiche-timeline li:last-child { border-bottom:0; }
.fiche-timeline .ft-action { color:var(--ink-700); font-size:.92rem; }
.fiche-timeline .ft-date { margin-left:auto; color:var(--ink-400); font-size:.82rem; white-space:nowrap; }

/* Fiche établissement : couples clé/valeur + guide de mise en route */
.kv-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:14px 26px; }
.kv { display:flex; flex-direction:column; gap:4px; padding:10px 0; border-top:1px solid var(--line); }
.kv .kk { font-size:.74rem; text-transform:uppercase; letter-spacing:.04em; color:var(--ink-400); font-weight:700; }
.kv .vv { color:var(--ink-800,var(--ink)); font-size:.95rem; display:flex; align-items:center; flex-wrap:wrap; }
.guide-panel .sub { margin-bottom:14px; }
.route-steps { list-style:none; counter-reset:g; margin:0; padding:0; display:grid; gap:12px; }
.route-steps li { counter-increment:g; position:relative; padding:12px 14px 12px 48px; background:var(--cream); border:1px solid var(--line); border-radius:12px; font-size:.92rem; line-height:1.55; color:var(--ink-700); }
.route-steps li::before { content:counter(g); position:absolute; left:12px; top:12px; width:24px; height:24px; border-radius:50%; background:var(--teal); color:#fff; font-weight:800; font-size:.82rem; display:grid; place-items:center; font-family:var(--font-display); }
.route-steps li strong { color:var(--ink); }

/* Formulaires admin */
.lbl { display:block; font-weight:600; font-size:.86rem; margin:12px 0 6px; color:var(--ink-700); }
.inp { width:100%; border:1px solid var(--line-2); border-radius:10px; padding:11px 12px; font:inherit; background:var(--paper); color:var(--ink); }
.inp:focus { outline:none; border-color:var(--teal); }

/* =========================================================================
   Visite guidée du parcours de formation (surlignage des vraies sections)
   ========================================================================= */
.igor-tour { position: fixed; inset: 0; z-index: 2147482500; display: none; }
.igor-tour.is-open { display: block; }
/* Le « trou » : une ombre portée géante assombrit tout SAUF le rectangle cible. */
.igor-tour-hole { position: fixed; top: 0; left: 0; width: 0; height: 0; border-radius: 12px; box-shadow: 0 0 0 9999px rgba(16, 32, 43, .6); transition: top .25s ease, left .25s ease, width .25s ease, height .25s ease; pointer-events: none; }
.igor-tour-hole.is-flat { border-radius: 0; }
.igor-tour-bulle { position: fixed; top: 0; left: 0; z-index: 2; width: min(360px, calc(100vw - 24px)); background: #fff; border-radius: 16px; box-shadow: 0 18px 50px rgba(16, 32, 43, .34); padding: 22px 18px 14px; }
/* Tête d'Igor, tangente au coin de la bulle (conviviale, comme sur les cartes). */
.igor-tour-igor { position: absolute; top: -24px; left: 16px; width: 52px; height: 52px; border-radius: 50%; background: #fff; border: 2px solid var(--teal); display: grid; place-items: center; box-shadow: var(--shadow-sm); }
.igor-tour-x { position: absolute; top: 8px; right: 10px; border: 0; background: none; font-size: 22px; line-height: 1; color: var(--ink-400); cursor: pointer; }
.igor-tour-x:hover { color: var(--ink); }
.igor-tour-etape { margin: 6px 0 4px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--teal-dark); }
.igor-tour-titre { margin: 0 0 6px; font-family: var(--font-display); font-size: 1.16rem; font-weight: 800; letter-spacing: -.01em; color: var(--ink); }
.igor-tour-texte { margin: 0 0 14px; font-size: .94rem; line-height: 1.55; color: var(--ink-700); }
.igor-tour-actions { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.igor-tour-dots { display: inline-flex; gap: 5px; }
.igor-tour-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--line-2); transition: background .2s, width .2s; }
.igor-tour-dot.is-on { background: var(--teal); width: 18px; border-radius: 5px; }
body.igor-tour-open { overflow: hidden; }
/* Bouton « Suivre le guide » présent sur chaque page (barre igor-help). */
.igor-help .igor-guide-btn { flex: none; }

/* Bac à sable de formation : bandeau + données d'exemple + retour de démo. */
.demo-banner { display: flex; align-items: center; gap: 14px; background: #fff6e9; border: 1px solid #f3d9a8; border-radius: 14px; padding: 12px 16px; margin-bottom: 18px; color: #8a6410; font-size: .94rem; }
.demo-banner svg { flex: none; }
.demo-banner strong { color: #7a5300; }
.review-demo { border-color: #f3d9a8; box-shadow: 0 0 0 3px rgba(245, 166, 35, .10), var(--shadow-sm); }
.review-done { opacity: .7; }
.demo-feedback { margin-top: 12px; background: var(--teal-soft); border: 1px solid #cfe8e4; border-left: 3px solid var(--teal); color: var(--teal-dark); border-radius: 10px; padding: 10px 12px; font-size: .9rem; font-weight: 600; }
/* Petit retour flottant pour les actions de démo sans zone dédiée (liste, copie). */
.igor-demo-toast { position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%) translateY(10px); background: var(--ink); color: #fff; padding: 12px 18px; border-radius: 12px; font-weight: 600; font-size: .92rem; box-shadow: 0 12px 30px rgba(0, 0, 0, .28); opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; z-index: 2147483000; max-width: 90vw; }
.igor-demo-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.referral-actions-btns { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 4px; }
@media (prefers-reduced-motion: reduce) { .igor-tour-hole { transition: none; } }

/* =========================================================================
   BLOG SEO — front (liste, carte, article) + back (éditeur, analyseur SEO)
   ========================================================================= */

/* -------------------------------- Front -------------------------------- */
.blog-head { max-width: 760px; }
.blog-toolbar { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 26px; }
.blog-search { position: relative; flex: 1 1 320px; display: flex; align-items: center; }
.blog-search svg { position: absolute; left: 13px; color: var(--ink-400); pointer-events: none; }
.blog-search input { width: 100%; border: 1px solid var(--line-2); border-radius: 12px; padding: 12px 14px 12px 40px; font: inherit; background: var(--paper); color: var(--ink); }
.blog-search input:focus { outline: none; border-color: var(--teal); }
.blog-sort { display: inline-flex; align-items: center; gap: 8px; font-size: .9rem; }
.blog-sort select { border: 1px solid var(--line-2); border-radius: 10px; padding: 10px 12px; font: inherit; background: var(--paper); color: var(--ink); }

.blog-cats { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.blog-chip { display: inline-block; padding: 6px 13px; border-radius: 20px; border: 1px solid var(--line-2); background: var(--paper); color: var(--ink-700); font-size: .84rem; font-weight: 600; transition: background .15s, color .15s, border-color .15s; }
.blog-chip:hover { border-color: var(--teal); color: var(--teal-dark); }
.blog-chip.is-active { background: var(--ink); color: #fff; border-color: var(--ink); }

.blog-count { margin: 22px 0 14px; font-size: .9rem; }
#blog-results { transition: opacity .15s; }
#blog-results.is-loading { opacity: .5; pointer-events: none; }

.blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.blog-card { display: flex; flex-direction: column; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm); transition: transform .12s ease, box-shadow .15s ease; }
.blog-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.blog-card-media { display: block; aspect-ratio: 40 / 21; background: linear-gradient(135deg, var(--teal-soft), #dfeeeb); position: relative; overflow: hidden; }
.blog-card-media img { width: 100%; height: 100%; object-fit: cover; }
.blog-card-ph { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--font-display); font-weight: 800; font-size: 2.6rem; color: var(--teal-dark); opacity: .55; }
.blog-card-body { display: flex; flex-direction: column; gap: 9px; padding: 18px 18px 20px; flex: 1; }
.blog-card-title { font-size: 1.16rem; line-height: 1.25; margin: 2px 0 0; }
.blog-card-title a:hover { color: var(--teal-dark); }
.blog-card-excerpt { color: var(--ink-500); font-size: .92rem; margin: 0; flex: 1; }
.blog-card-meta { display: flex; align-items: center; gap: 8px; font-size: .8rem; margin-top: 4px; }
.blog-card .blog-chip { align-self: flex-start; padding: 3px 10px; font-size: .76rem; }

.blog-empty { text-align: center; padding: 40px 10px; color: var(--ink-500); }
.blog-empty svg, .blog-empty img { margin: 0 auto 12px; }

.blog-tagcloud { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 26px; }
.blog-tag { font-size: .84rem; color: var(--ink-500); font-weight: 600; padding: 4px 10px; border-radius: 8px; background: var(--cream-2); }
.blog-tag:hover, .blog-tag.is-active { background: var(--teal-soft); color: var(--teal-dark); }

/* Article */
.blog-article .crumbs { font-size: .82rem; color: var(--ink-500); font-weight: 600; margin-bottom: 6px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.blog-article .crumbs a:hover { color: var(--teal-dark); }
.blog-article-meta { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: .88rem; }
.blog-cover { margin: 24px 0 6px; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); }
.blog-cover img { width: 100%; height: auto; object-fit: cover; }
.blog-content { font-family: var(--font-serif); font-size: 1.09rem; color: var(--ink-700); line-height: 1.75; margin-top: 22px; }
.blog-content > *:first-child { margin-top: 0; }
.blog-content h2 { font-size: 1.7rem; margin: 34px 0 12px; }
.blog-content h3 { font-size: 1.28rem; margin: 26px 0 10px; }
.blog-content h4 { font-size: 1.08rem; margin: 20px 0 8px; font-family: var(--font-sans); }
.blog-content p { margin: 0 0 16px; }
.blog-content ul, .blog-content ol { margin: 0 0 18px; padding-left: 24px; }
.blog-content li { margin-bottom: 7px; }
.blog-content a { color: var(--teal-dark); text-decoration: underline; text-underline-offset: 2px; }
.blog-content blockquote { margin: 22px 0; padding: 4px 18px; border-left: 4px solid var(--teal); background: var(--teal-soft); border-radius: 0 10px 10px 0; color: var(--ink-700); font-style: italic; }
.blog-content img { border-radius: 12px; margin: 18px 0; border: 1px solid var(--line); }
.blog-content figure { margin: 18px 0; }
.blog-content figcaption { font-size: .84rem; color: var(--ink-400); font-family: var(--font-sans); text-align: center; margin-top: 6px; }
.blog-content code { background: var(--cream-2); padding: 2px 6px; border-radius: 6px; font-family: var(--font-mono); font-size: .9em; }
.blog-content hr { border: 0; border-top: 1px solid var(--line); margin: 28px 0; }
.blog-content mark { background: #fdf1cf; padding: 0 3px; }

/* Accueil : bloc derniers articles */
.home-blog-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 26px; flex-wrap: wrap; }

@media (max-width: 900px) { .blog-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .blog-grid { grid-template-columns: 1fr; } .blog-toolbar { flex-direction: column; align-items: stretch; } }

/* ------------------------- Back-office : éditeur ----------------------- */
.article-editor-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 24px; align-items: start; }
.ae-main { min-width: 0; }
.ae-side { display: flex; flex-direction: column; gap: 18px; position: sticky; top: 18px; }
.ae-box { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; box-shadow: var(--shadow-sm); }
.ae-box h3 { font-size: 1rem; margin-bottom: 12px; }
.ae-two { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.ae-two--wide { grid-template-columns: 1.4fr 1fr; align-items: start; }
.article-editor-grid .field { margin-bottom: 16px; }
.input-group { display: flex; align-items: center; gap: 8px; }
.input-group .inp { flex: 1; min-width: 0; }
.input-prefix { color: var(--ink-400); font-size: .88rem; white-space: nowrap; }

/* Éditeur riche */
.rte { border: 1px solid var(--line-2); border-radius: 12px; overflow: hidden; background: var(--paper); }
.rte-toolbar { display: flex; flex-wrap: wrap; gap: 5px; padding: 9px 10px; background: var(--cream-2); border-bottom: 1px solid var(--line); align-items: center; }
.rte-group { display: inline-flex; align-items: center; gap: 3px; padding-right: 8px; margin-right: 5px; border-right: 1px solid var(--line-2); }
.rte-group:last-child { border-right: 0; }
.rte-btn { min-width: 34px; height: 34px; padding: 0 8px; border: 0; border-radius: 8px; background: #fff; color: var(--ink); font-size: 1rem; line-height: 1; display: inline-grid; place-items: center; box-shadow: 0 0 0 1px var(--line-2) inset; cursor: pointer; }
.rte-btn:hover { background: var(--teal-soft); color: var(--teal-dark); box-shadow: 0 0 0 1px var(--teal) inset; }
.rte-btn:active { transform: translateY(1px); }
.rte-btn svg { width: 18px; height: 18px; display: block; }
.rte-select { height: 34px; border: 1px solid var(--line-2); border-radius: 8px; background-color: #fff; color: var(--ink); font: inherit; font-size: .86rem; padding: 0 26px 0 10px; cursor: pointer;
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23576877' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 8px center; }
.rte-select:hover { border-color: var(--teal); }
.rte-select[data-rte-block] { min-width: 134px; font-weight: 600; }
.rte-select[data-rte-font] { min-width: 118px; }
.rte-select[data-rte-size] { min-width: 106px; }
.rte-colors { gap: 5px; }
.rte-swatch { width: 22px; height: 22px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 0 1px var(--line-2); cursor: pointer; padding: 0; }
.rte-swatch:hover { transform: scale(1.15); box-shadow: 0 0 0 2px var(--teal); }
.rte-inset { display: flex; flex-wrap: wrap; gap: 8px; padding: 10px; background: #fbf7ef; border-bottom: 1px solid var(--line); align-items: center; }
.rte-inset .inp { flex: 1; min-width: 160px; }
/* Les boutons « Insérer / Annuler » doivent faire la même hauteur que le champ
   (sinon ils paraissent « tranchés », plus courts que l'input). */
.rte-inset .inp, .rte-inset .btn { height: 42px; }
.rte-inset .btn { border-radius: 10px; padding-top: 0; padding-bottom: 0; }
.rte-editor { min-height: 320px; padding: 18px 20px; font-family: var(--font-serif); font-size: 1.04rem; line-height: 1.7; color: var(--ink); outline: none; }
.rte-editor:focus { box-shadow: inset 0 0 0 2px var(--teal-soft); }
.rte-editor.is-empty::before { content: attr(data-placeholder); color: var(--ink-400); pointer-events: none; }
.rte-editor h2 { font-size: 1.5rem; margin: 20px 0 10px; }
.rte-editor h3 { font-size: 1.2rem; margin: 16px 0 8px; }
.rte-editor p { margin: 0 0 12px; }
.rte-editor ul, .rte-editor ol { margin: 0 0 12px; padding-left: 22px; }
.rte-editor blockquote { border-left: 4px solid var(--teal); background: var(--teal-soft); margin: 14px 0; padding: 4px 14px; border-radius: 0 8px 8px 0; }
.rte-editor a { color: var(--teal-dark); text-decoration: underline; }
.rte-editor img { max-width: 100%; border-radius: 8px; margin: 8px 0; }
.rte-stats { font-size: .8rem; margin-top: 6px; }

.ae-tag-suggest { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.tag-pill { font-size: .76rem; padding: 3px 9px; border-radius: 20px; border: 1px solid var(--line-2); background: var(--paper); color: var(--ink-500); }
.tag-pill:hover { border-color: var(--teal); color: var(--teal-dark); }
.tag-pill.is-on { background: var(--teal-soft); border-color: var(--teal); color: var(--teal-dark); }

.field .over { color: var(--terra); font-weight: 700; }

/* Aperçu SERP Google */
.serp-preview { border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; background: #fff; margin-top: 6px; }
.serp-url { font-size: .78rem; color: #4d5156; margin-bottom: 3px; }
.serp-title { color: #1a0dab; font-size: 1.05rem; line-height: 1.3; font-family: var(--font-sans); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.serp-desc { color: #4d5156; font-size: .84rem; line-height: 1.5; margin-top: 3px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* Analyseur SEO */
.seo-analysis .seo-score-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.seo-analysis h3 { margin: 0; }
.seo-score { font-weight: 800; font-size: .92rem; padding: 3px 10px; border-radius: 20px; background: var(--cream-2); color: var(--ink-500); }
.seo-score.is-good { background: #e7f6ee; color: var(--green-dark); }
.seo-score.is-ok { background: #fbf0d8; color: #96660f; }
.seo-score.is-bad { background: #fbe4de; color: #b2402c; }
.seo-checks { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 7px; }
.seo-check { display: flex; align-items: flex-start; gap: 9px; font-size: .84rem; color: var(--ink-700); line-height: 1.4; }
.seo-dot { flex: none; width: 9px; height: 9px; border-radius: 50%; margin-top: 5px; background: var(--ink-300, #b7c0c9); }
.seo-good .seo-dot { background: #2f9e5f; }
.seo-ok .seo-dot { background: #e2a615; }
.seo-bad .seo-dot { background: #d4593c; }

/* Catégories (back) */
.cat-list { display: flex; flex-direction: column; gap: 10px; }
.cat-item { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; padding: 8px; border: 1px solid var(--line); border-radius: 10px; }
.cat-edit { display: flex; gap: 8px; align-items: center; flex: 1; flex-wrap: wrap; }
.cat-edit .inp { flex: 1; min-width: 120px; }

@media (max-width: 1000px) { .article-editor-grid { grid-template-columns: 1fr; } .ae-side { position: static; } .ae-two--wide { grid-template-columns: 1fr; } }

/* ------------------- Article : mise en page 2 colonnes ----------------- */
.blog-article { padding: 40px 0 72px; background: linear-gradient(180deg, var(--teal-soft) 0, rgba(231,244,242,0) 360px), var(--cream); }
.blog-article-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 40px; align-items: start; max-width: 1180px; }
.blog-article-main { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow); }
.blog-hero { margin: 0; aspect-ratio: 40 / 21; background: var(--teal-soft); }
.blog-hero img { width: 100%; height: 100%; object-fit: cover; display: block; }
.blog-article-inner { padding: 34px 46px 46px; }
.blog-article-inner > .crumbs { margin-bottom: 10px; }
.blog-article-inner h1 { font-size: clamp(1.9rem, 3.6vw, 2.7rem); }
.blog-article-meta { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; font-size: .9rem; }
.ba-author { display: inline-flex; align-items: center; gap: 7px; }
.ba-author svg { border-radius: 50%; }
.blog-lead { font-family: var(--font-serif); font-size: 1.24rem; color: var(--ink-700); line-height: 1.6; margin-top: 22px; padding-left: 18px; border-left: 4px solid var(--teal); }
.blog-article-inner .blog-content { margin-top: 26px; }
.blog-content h2 { scroll-margin-top: 90px; }
.blog-content h3 { scroll-margin-top: 90px; }

.blog-aside { display: flex; flex-direction: column; gap: 20px; position: sticky; top: 88px; }
.aside-box { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; box-shadow: var(--shadow-sm); }
.aside-box h4 { font-size: .76rem; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-500); margin-bottom: 12px; }
.blog-toc { display: flex; flex-direction: column; gap: 2px; }
.blog-toc a { font-size: .89rem; color: var(--ink-500); padding: 6px 10px; border-radius: 8px; border-left: 2px solid transparent; line-height: 1.35; }
.blog-toc a:hover { background: var(--cream-2); color: var(--ink); }
.blog-toc a.is-active { color: var(--teal-dark); border-left-color: var(--teal); background: var(--teal-soft); font-weight: 600; }
.aside-related { display: flex; flex-direction: column; gap: 14px; }
.aside-related-item { display: flex; gap: 11px; align-items: center; }
.aside-related-item:hover strong { color: var(--teal-dark); }
.ari-thumb { flex: none; width: 60px; height: 46px; border-radius: 9px; overflow: hidden; background: var(--teal-soft); display: grid; place-items: center; }
.ari-thumb img { width: 100%; height: 100%; object-fit: cover; }
.ari-thumb--ph { font-family: var(--font-display); font-weight: 800; color: var(--teal-dark); font-size: 1.2rem; }
.ari-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ari-body strong { font-size: .89rem; line-height: 1.25; color: var(--ink); }
.ari-body .muted { font-size: .76rem; }
.aside-cta { text-align: center; background: linear-gradient(160deg, #fff, var(--teal-soft)); }
.aside-cta svg { margin: 0 auto 8px; }
.aside-cta strong { display: block; font-family: var(--font-display); font-size: 1.05rem; }
.aside-cta p { font-size: .85rem; margin: 6px 0 13px; }
.aside-cta .btn { margin-bottom: 8px; }
.aside-links { display: flex; flex-direction: column; gap: 2px; }
.aside-links a { font-size: .9rem; color: var(--ink-700); padding: 7px 10px; border-radius: 8px; }
.aside-links a:hover { background: var(--cream-2); color: var(--teal-dark); }

@media (max-width: 980px) {
  .blog-article-layout { grid-template-columns: 1fr; }
  .blog-aside { position: static; }
  .blog-article-inner { padding: 26px 22px 34px; }
}

/* ------------------- Back-office : uploader d'image ------------------- */
.cover-uploader { display: flex; flex-direction: column; gap: 10px; }
.cover-preview { position: relative; aspect-ratio: 40 / 21; border: 1px dashed var(--line-2); border-radius: 12px; overflow: hidden; background: var(--cream-2); display: grid; place-items: center; }
.cover-preview img { width: 100%; height: 100%; object-fit: cover; }
.cover-preview-ph { display: none; color: var(--ink-400); font-size: .84rem; }
.cover-preview.is-empty img { display: none; }
.cover-preview.is-empty .cover-preview-ph { display: block; }
.cover-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.cover-import { position: relative; overflow: hidden; }
.cover-status { font-size: .8rem; }

/* ------------------- Sélection des fiches Google ---------------------- */
.gselect-list { display: flex; flex-direction: column; gap: 12px; margin-bottom: 22px; }
.gselect-item { position: relative; display: flex; align-items: center; gap: 14px; padding: 16px 18px; border: 1px solid var(--line); border-radius: 14px; background: var(--paper); cursor: pointer; transition: border-color .15s, box-shadow .15s, background .15s; }
.gselect-item:hover { border-color: var(--line-2); box-shadow: var(--shadow-sm); }
.gselect-item.is-on { border-color: var(--teal); background: var(--teal-soft); }
.gselect-item input { position: absolute; opacity: 0; width: 0; height: 0; }
.gselect-check { flex: none; width: 22px; height: 22px; border-radius: 7px; border: 2px solid var(--line-2); display: grid; place-items: center; background: #fff; transition: all .15s; }
.gselect-item input:checked + .gselect-check { background: var(--teal); border-color: var(--teal); }
.gselect-item input:checked + .gselect-check::after { content: "✓"; color: #fff; font-size: .8rem; font-weight: 800; line-height: 1; }
.gselect-item input:focus-visible + .gselect-check { box-shadow: 0 0 0 3px var(--teal-soft); }
.gselect-body { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.gselect-body strong { font-size: 1rem; }
.gselect-body .muted { font-size: .86rem; }
.gselect-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }

/* ============================ Support / tickets ========================== */
/* Badge rouge de la nav (onglet Support quand il y a des nouveaux). */
.side nav a .badge.badge-alert { background: var(--terra); color: #fff; }
.side nav a.active .badge.badge-alert { background: #fff; color: var(--terra); }

/* Barre du haut + cloche de notifications. */
.topbar { display: flex; justify-content: flex-end; margin-bottom: 10px; }
.notif { position: relative; }
.notif > summary { list-style: none; cursor: pointer; position: relative; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; color: var(--ink-700); background: var(--paper); border: 1px solid var(--line); }
.notif > summary::-webkit-details-marker { display: none; }
.notif > summary:hover { background: var(--cream-2); color: var(--ink); }
.notif-dot { position: absolute; top: -5px; right: -5px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 20px; background: var(--terra); color: #fff; font-size: .68rem; font-weight: 800; display: grid; place-items: center; border: 2px solid var(--cream); }
.notif-pop { position: absolute; right: 0; top: calc(100% + 8px); z-index: 50; width: 320px; max-width: 86vw; background: var(--paper); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow); overflow: hidden; }
.notif-pop-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; border-bottom: 1px solid var(--line); }
.notif-readall { background: none; border: 0; color: var(--teal-dark); font: 600 .8rem var(--font-sans); cursor: pointer; }
.notif-list { list-style: none; margin: 0; padding: 6px; max-height: 360px; overflow: auto; }
.notif-list li a { display: block; padding: 10px 12px; border-radius: 10px; color: var(--ink-700); }
.notif-list li a:hover { background: var(--cream-2); }
.notif-list li.is-unread a { background: color-mix(in srgb, var(--teal) 8%, var(--paper)); }
.notif-t { display: block; font-weight: 600; color: var(--ink); font-size: .9rem; }
.notif-s { display: block; font-size: .82rem; color: var(--ink-500); }
.notif-time { display: block; font-size: .74rem; color: var(--ink-400); margin-top: 2px; }
.notif-empty { padding: 22px 14px; text-align: center; color: var(--ink-500); font-size: .88rem; }
.notif-foot { display: block; padding: 11px 14px; border-top: 1px solid var(--line); font-weight: 600; color: var(--teal-dark); font-size: .86rem; }
.notif-foot:hover { background: var(--cream-2); }

/* Grille support (fil + colonne latérale). */
.support-grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 20px; align-items: start; }
.support-grid > .panel, .sup-main > .panel { margin-bottom: 0; }
.sup-main { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.support-new, .support-list { min-width: 0; }
@media (max-width: 900px) { .support-grid { grid-template-columns: 1fr; } }

/* Liste des demandes (client). */
.ticket-rows { display: flex; flex-direction: column; gap: 8px; }
.ticket-row { display: flex; align-items: center; gap: 12px; padding: 13px 15px; border: 1px solid var(--line); border-radius: 12px; background: var(--paper); box-shadow: var(--shadow-sm); }
.ticket-row:hover { border-color: var(--line-2); background: var(--cream); }
.ticket-row.is-unread { border-left: 3px solid var(--teal); }
.ticket-row-main { flex: 1; min-width: 0; }
.ticket-subj { display: block; font-weight: 600; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ticket-meta { display: block; font-size: .8rem; color: var(--ink-400); }
.ticket-newdot { width: 9px; height: 9px; border-radius: 50%; background: var(--terra); flex: none; }

/* Pastilles de statut / priorité. */
.spill { display: inline-block; font-size: .74rem; font-weight: 700; padding: 2px 10px; border-radius: 20px; }
.spill.s-wait { background: color-mix(in srgb, var(--amber) 22%, var(--paper)); color: #8a5a04; }
.spill.s-prog { background: var(--teal-soft); color: var(--teal-dark); }
.spill.s-done { background: var(--cream-2); color: var(--ink-500); }
.ppill { display: inline-block; font-size: .74rem; font-weight: 700; padding: 2px 10px; border-radius: 20px; }
.ppill.p-low { background: var(--cream-2); color: var(--ink-500); }
.ppill.p-mid { background: color-mix(in srgb, var(--amber) 22%, var(--paper)); color: #8a5a04; }
.ppill.p-high { background: color-mix(in srgb, var(--terra) 18%, var(--paper)); color: #a2472e; }

/* Fil de discussion. */
.thread { display: flex; flex-direction: column; gap: 12px; }
.thread .msg { border: 1px solid var(--line); border-radius: 14px; padding: 13px 15px; background: var(--paper); box-shadow: var(--shadow-sm); max-width: 90%; }
.msg-me { align-self: flex-end; background: var(--teal-soft); border-color: color-mix(in srgb, var(--teal) 25%, var(--paper)); }
.msg-team { align-self: flex-start; }
.msg-note { align-self: stretch; max-width: 100%; background: #fbf6ec; border-color: #ecd9a8; border-style: dashed; }
.msg-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 5px; }
.msg-head strong { font-size: .86rem; color: var(--ink); }
.msg-date { font-size: .76rem; color: var(--ink-400); white-space: nowrap; }
.msg-body { color: var(--ink-700); line-height: 1.55; white-space: pre-wrap; word-break: break-word; }
.msg-atts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.att-chip { display: inline-flex; align-items: center; gap: 6px; max-width: 220px; padding: 5px 10px; border: 1px solid var(--line-2); border-radius: 20px; background: var(--paper); font-size: .82rem; color: var(--ink-700); }
.att-chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.att-chip:hover { border-color: var(--teal); color: var(--teal-dark); }

/* Onglets admin + tableau. */
.sup-tabs { display: flex; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; }
.sup-tab { display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; border-radius: 10px; border: 1px solid var(--line); background: var(--paper); color: var(--ink-700); font-weight: 600; font-size: .9rem; }
.sup-tab:hover { background: var(--cream-2); }
.sup-tab.is-active { background: var(--ink); color: #fff; border-color: var(--ink); }
.sup-tab-n { background: var(--cream-2); color: var(--ink-700); border-radius: 20px; font-size: .74rem; font-weight: 800; padding: 0 7px; }
.sup-tab.is-active .sup-tab-n { background: rgba(255,255,255,.2); color: #fff; }
.sup-tab.has-new:not(.is-active) .sup-tab-n { background: var(--terra); color: #fff; }
.sup-table tr.sla-warn > td { background: color-mix(in srgb, var(--amber) 12%, var(--paper)); }
.sup-table tr.sla-urgent > td { background: color-mix(in srgb, var(--terra) 12%, var(--paper)); }
.sup-table tr.sla-urgent > td:first-child { box-shadow: inset 3px 0 0 var(--terra); }
.sup-table tr.sla-warn > td:first-child { box-shadow: inset 3px 0 0 var(--amber); }

/* Bloc « changer la priorité » dans la colonne. */
.sup-inline { margin-top: 6px; }
.sup-inline-lbl { display: block; font-size: .78rem; font-weight: 600; color: var(--ink-500); margin-bottom: 6px; }
.sup-inline-row { display: flex; gap: 8px; margin-bottom: 8px; }
.sup-inline-row .lead-status-select { flex: 1; }

/* Fil de conversation client (style e-mail, avatars) — vue support client. */
.cthread-wrap { max-width: 780px; }
.cthread-wrap > .panel { margin-bottom: 16px; }
.cthread { display: flex; flex-direction: column; }
.cmsg { display: flex; gap: 13px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.cmsg:first-child { padding-top: 2px; }
.cmsg:last-child { border-bottom: 0; padding-bottom: 2px; }
.cmsg-av { flex: none; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: .82rem; letter-spacing: .01em; }
.cmsg.is-team .cmsg-av { background: var(--teal); color: #fff; }
.cmsg.is-me .cmsg-av { background: var(--cream-2); color: var(--ink-700); }
.cmsg-body { flex: 1; min-width: 0; }
.cmsg-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 4px; }
.cmsg-head strong { color: var(--ink); font-size: .92rem; }
.cmsg-date { font-size: .76rem; color: var(--ink-400); white-space: nowrap; }
.cmsg-text { color: var(--ink-700); line-height: 1.55; white-space: pre-wrap; word-break: break-word; }
.cthread-closed { text-align: center; }