/* Twist theme — applique l'identité visuelle twist-conseil.fr à Twistosociaux.
 *
 * Charge la typo Poppins en local (offline) et expose la palette signature
 * via des variables CSS. Surcharge les classes les plus visibles pour donner
 * une cohérence visuelle immédiate avec le site corporate.
 *
 * À charger APRÈS app.css pour gagner en spécificité.
 */

/* ------------------------------------------------------------------------ */
/* Typographie locale (offline-friendly)                                    */
/* ------------------------------------------------------------------------ */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/static/fonts/poppins-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/static/fonts/poppins-500.woff2') format('woff2');
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/static/fonts/poppins-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/static/fonts/poppins-700.woff2') format('woff2');
}

/* ------------------------------------------------------------------------ */
/* Palette Twist                                                            */
/* ------------------------------------------------------------------------ */
:root {
  /* Logo gradient (4 stops)                                                */
  --twist-salmon: #F1958D;   /*  0%                                         */
  --twist-coral:  #E95E71;   /* 27%                                         */
  --twist-violet: #B372AF;   /* 63%                                         */
  --twist-teal:   #2FC9B7;   /* 99%                                         */

  /* Corporate (extrait du CSS twist-conseil.fr)                            */
  --twist-deep:    #2a2246;  /* dark purple (texte fort, header)            */
  --twist-purple:  #4B3C7D;  /* purple (CTAs sobres)                        */

  /* Surfaces                                                               */
  --twist-bg:      #f7f6fb;  /* fond app léger violet                       */
  --twist-surface: #ffffff;
  --twist-text:    #1f1838;
  --twist-text-soft: #5b5278;
  --twist-border:  #e6e2f0;

  /* Gradient signature (utilisable comme background ou border-image)       */
  --twist-gradient: linear-gradient(
    135deg,
    var(--twist-salmon) 0%,
    var(--twist-coral)  27%,
    var(--twist-violet) 63%,
    var(--twist-teal)   99%
  );
  --twist-gradient-hover: linear-gradient(
    135deg,
    #e8857c 0%,
    #d94d61 27%,
    #a262a0 63%,
    #28b8a7 99%
  );
}

/* ------------------------------------------------------------------------ */
/* Base                                                                     */
/* ------------------------------------------------------------------------ */
body {
  font-family: 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
  background: var(--twist-bg);
  color: var(--twist-text);
  font-feature-settings: "kern", "liga";
}

/* Override Tailwind bg-gray-50 (utilisé en arrière-plan) */
.bg-gray-50 { background-color: var(--twist-bg) !important; }

/* ------------------------------------------------------------------------ */
/* Header global (admin + éditeur)                                          */
/* ------------------------------------------------------------------------ */
.admin-header {
  background: var(--twist-deep) !important;
  color: #fff;
  position: relative;
  padding: 28px 24px 36px;
  margin-bottom: 24px;
  border-radius: 0 0 24px 24px;
  overflow: hidden;
}
/* Bande dégradée signature en bas du header */
.admin-header::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 5px;
  background: var(--twist-gradient);
}

.admin-header .wordmark {
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: 28px;
  letter-spacing: -0.02em;
  color: #fff;
  line-height: 1.1;
}
.admin-header .tagline {
  font-weight: 400;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.78);
  margin-top: 4px;
}
.admin-header .global-counter {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 14px;
  padding: 4px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.10);
  color: #fff;
  font-size: 13px;
  font-weight: 500;
}

/* Brand block : logo + texte côte à côte                                   */
.twist-brand {
  display: flex;
  align-items: center;
  gap: 14px;
}
.twist-brand-logo {
  height: 44px;
  width: auto;
  flex-shrink: 0;
}
.twist-brand-text {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}
.twist-product {
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: 22px;
  color: #fff;
  letter-spacing: -0.01em;
}
.twist-tagline {
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: rgba(255, 255, 255, 0.65);
  margin-top: 2px;
}

/* ------------------------------------------------------------------------ */
/* Boutons                                                                  */
/* ------------------------------------------------------------------------ */
.btn-primary {
  background: var(--twist-gradient) !important;
  background-size: 150% 150% !important;
  color: #fff !important;
  font-weight: 600 !important;
  font-family: 'Poppins', sans-serif;
  padding: 10px 20px !important;
  border-radius: 999px !important;
  border: none;
  cursor: pointer;
  transition: transform 150ms, box-shadow 150ms, background-position 600ms;
  box-shadow: 0 4px 14px rgba(233, 94, 113, 0.22);
}
.btn-primary:hover {
  transform: translateY(-1px);
  background-position: 100% 0% !important;
  box-shadow: 0 6px 18px rgba(233, 94, 113, 0.32);
  filter: none !important;
}
.btn-primary:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
}

.btn-secondary {
  background: #fff !important;
  color: var(--twist-deep) !important;
  border: 1.5px solid var(--twist-border) !important;
  border-radius: 999px !important;
  font-family: 'Poppins', sans-serif;
  font-weight: 500;
  padding: 9px 18px !important;
  transition: border-color 150ms, color 150ms;
}
.btn-secondary:hover {
  border-color: var(--twist-coral) !important;
  color: var(--twist-coral) !important;
  background: #fff !important;
}

/* ------------------------------------------------------------------------ */
/* Cards scénarios                                                          */
/* ------------------------------------------------------------------------ */
.scenario-card {
  background: var(--twist-surface);
  border: 1px solid var(--twist-border);
  border-radius: 16px;
  padding: 20px 22px;
  transition: transform 150ms, box-shadow 150ms, border-color 150ms;
  position: relative;
  overflow: hidden;
}
.scenario-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 4px;
  height: 100%;
  background: var(--twist-gradient);
  opacity: 0.55;
  transition: opacity 200ms, width 200ms;
}
.scenario-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(42, 34, 70, 0.10);
  border-color: transparent;
}
.scenario-card:hover::before {
  opacity: 1;
  width: 6px;
}
.scenario-title {
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 17px;
  color: var(--twist-deep);
}
.scenario-meta,
.scenario-metrics {
  color: var(--twist-text-soft);
  font-size: 13px;
}

/* ------------------------------------------------------------------------ */
/* Drop zone                                                                */
/* ------------------------------------------------------------------------ */
.drop-zone {
  background: var(--twist-surface);
  border: 2px dashed var(--twist-border);
  border-radius: 18px;
  transition: border-color 150ms, background 150ms;
  padding: 36px 24px;
  text-align: center;
  cursor: pointer;
}
.drop-zone:hover,
.drop-zone.drag-over {
  border-color: var(--twist-coral);
  background: linear-gradient(135deg, rgba(241, 149, 141, 0.06), rgba(47, 201, 183, 0.06));
}
.drop-zone .drop-text {
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  color: var(--twist-deep);
}

/* ------------------------------------------------------------------------ */
/* État vide                                                                */
/* ------------------------------------------------------------------------ */
.empty-state {
  background: var(--twist-surface);
  border: 1px dashed var(--twist-border);
  border-radius: 18px;
  padding: 48px 24px;
  text-align: center;
  color: var(--twist-text-soft);
}
.empty-title {
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  color: var(--twist-deep);
  font-size: 17px;
  margin-bottom: 4px;
}

/* ------------------------------------------------------------------------ */
/* Liens accent                                                             */
/* ------------------------------------------------------------------------ */
a.twist-link,
.text-blue-600 {
  color: var(--twist-coral) !important;
}
a.twist-link:hover,
.text-blue-600:hover {
  color: var(--twist-purple) !important;
}

/* ------------------------------------------------------------------------ */
/* Toggle dark mode et boutons utilitaires                                  */
/* ------------------------------------------------------------------------ */
.btn-icon-danger {
  color: var(--twist-coral);
}

/* ------------------------------------------------------------------------ */
/* /screen reste en X-dark fidèle. On garde le badge OFFICIEL en gradient   */
/* Twist plutôt que le bleu X pour cohérence de marque.                     */
/* ------------------------------------------------------------------------ */
.x-feed-dark .badge-official {
  background: var(--twist-gradient) !important;
  color: #fff !important;
  border: none !important;
}

/* Filigrane client : style plus harmonisé sur la palette                   */
.client-watermark {
  border-color: rgba(241, 149, 141, 0.30);
}